벽돌 형 배경 이미지

Question

레일 웹 응용 프로그램에서 루비에 대한 연구를하고 있는데, 몇 가지 질문에 도움이 필요합니다.

1. masonry jquery type 플러그인을 사용하여 이미지를 웹 페이지의 배경으로 렌더링/표시 할 수 있습니까?

2. 첫 번째 질문에 대한 대답이 '아니오'이면 css (3) 및 html (5)을 사용하여 수동으로 여러 이미지를 배경으로 렌더링 할 수 있습니까?

3. 마지막으로 1, 2 또는 다른 방법을 사용하여 여러 배경 이미지를 표시 할 수 있다면 이미지를 조작하기 위해 정기적 인 CSS 코드를 적용 할 수 있습니까?

미리 도움을 청하십시오.

Answer 1

CSS3에서도 가능합니다.

#exampleA { 
width: 500px; 
height: 250px; 
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); 
background-repeat: no-repeat; 
background-position: left top, right bottom, left top; 
} 

순서는 (왼쪽) 처음부터 실행 (오른쪽) 마지막으로 가기 계층 인 바닥 배경 레이어 인 : 그것은 가장 간단한이기에서, 여기 당신이 그것을 달성하는 방법에 대한 예입니다 (즉, 레이어링하는 경우).

편집 : 당신이 형식의이 종류에 CSS를 중단 할 필요가 같은 그레이 스케일로 각 배경 이미지에 더 복잡 stylings가를 적용하려면 :

/* this is the master css block - the height and width here represent the total coverage for all child background images */ 
    .sample1 .sea, .sample1 .mermaid, .sample1 .fishing { 
     height: 300px; 
     width: 480px; 
     position: relative; 

    } 
/* individual stylings for each background image featured - apply greyscale and separate width and heights here */ 
    .sample1 .sea { 
     background: url(media/sea.png) repeat-x top left; 
    } 
    .sample1 .mermaid { 
     background: url(media/mermaid.svg) repeat-x bottom left; 
    } 
    .sample1 .fish { 
     background: url(media/fish.svg) no-repeat; 
     height: 70px; 
     width: 100px; 
     left: 30px; 
     top: 90px; 
     position: absolute; 
    } 
    .sample1 .fishing { 
     background: url(media/fishing.svg) no-repeat top right 10px; 
    }