CSS가있는 배경이 3 가지입니다.

CSS에서 다음 작업이 가능한지 궁금합니다.CSS가있는 배경이 3 가지입니다.

나는 백그라운드의 전체 너비에 걸쳐 실행되는 3 개의 가로 막대가 있어야합니다. 다음은 내가 배경을 좋아할만한 것의 대략적인 모형이다. enter image description here

나는 다음과 같이 놀랐다. 배경을 배치 할 수없는 것처럼 보인다. 내가 잘못 뭘하는지 http://jsfiddle.net/5fo054L2/1/

어떤 생각 : 여기

#blog { 
width: 1200px; 
height: 100%; 
background-image: url("bg1.png"), 
      url("bg2.png"), 
      url("bg3.png"); 
background-position: 10px 10px, 
      170px 10px, 
      750px 10px; 
background-repeat:repeat-x; 
}

는 바이올린입니까?

출처

2014-10-16 mango

'배경 이미지'는 하나만 사용할 수 있습니다. 그러나 그것들을 하나의 이미지로 결합 할 수 있습니다 : P 또는 단지 그라디언트를 사용하기 때문에 색이 –

입니다. 댓글이 마음에 들지만 마음에 들지는 않습니다. 실제로 css3 이후 여러 배경 이미지를 가질 수 있다는 사실을 잊어 버렸습니다. – Felk

CSS가 정상적으로 보입니다. 실제 코드 (어쩌면 바이올린)를 게시하여 실제 문제를 해결할 수 있습니다. – Felk

또한 3 개의 이미지 파일을 만들어 다른 모든 파일 아래에 배치하고 절대 위치 지정을 사용하여 설정할 수 있습니다.

출처

2014-10-17 00:35:06 dhc

거의 가지고 있습니다. 문제는 x와 y 위치가 혼란 스럽다는 것입니다. 또한 x 위치는 반복 할 경우 아무런 의미가 없습니다. (귀하의 예제에서 텍스트의) 수직 높이가 표시되는 배경 이미지의 양을 제한 할 것을 http://jsfiddle.net/5fo054L2/3/

참고 :

.blog { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png"); 
 
    background-position: 0px 170px, 0px 100px, 0px 10px; 
 
    background-repeat: repeat-x; 
 
}

다음은 업데이트 된 jsfiddle입니다.

출처

2014-10-17 00:35:47 kevintechie

바이올린이 배경을 표시하지 않습니다. . . –

어떤 브라우저를 사용하십니까? 이 코드는 CSS3를 지원하는 브라우저를 사용하는 것에 달려 있습니다. 당신은 OP의 jsfiddle를 볼 때 무엇을 볼 수 있습니까? – kevintechie

크롬 39 베타를 사용합니다. 나는 텍스트를 보지만 BG는 전혀 없다. –

CSS가있는 배경이 3 가지입니다.

답변

관련 문제