CSS를 사용하여 여러 배경 이미지를 가질 수 있습니까?

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

문제

두 개의 배경 이미지가있을 수 있습니까? 예를 들어, 하나의 이미지가 상단 (반복 X)을 가로 질러 반복하고 전체 페이지를 가로 질러 반복하는 다른 이미지 (반복)를 원합니다. 전체 페이지의 하나는 상단에 걸쳐 반복되는 것 뒤에 있습니다.

HTML과 Body의 배경을 설정하여 두 배경 이미지에 대한 원하는 효과를 얻을 수 있음을 발견했습니다.

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

이것이 "좋은"CSS입니까? 더 나은 방법이 있습니까? 그리고 3 개 이상의 배경 이미지를 원한다면 어떻게해야합니까?

도움이 되었습니까?

해결책

CSS3은 이런 종류의 일을 허용하며 다음과 같이 보입니다.

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

모든 주요 브라우저의 현재 버전은 이제 지원합니다., 그러나 IE8 이하를 지원해야한다면, 당신이 그것을 둘러 볼 수있는 가장 좋은 방법은 추가 divs를 갖는 것입니다.

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

다른 팁

하나의 div에서 두 개의 다른 배경 이미지를 사용하는 가장 쉬운 방법은이 코드 라인을 사용하는 것입니다.

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

분명히, 그것은 웹 사이트의 본문 일 필요는 없으며 원하는 DIV에 사용할 수 있습니다.

도움이되기를 바랍니다! 내 블로그에는 누군가가 추가 지침이나 도움이 필요하다면 이것에 대해 조금 더 깊이 설명하는 게시물이 있습니다. http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

이것을 사용하십시오 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

배경 위치로 모든 이미지 위치를 조정하는 간단한 방법 : 배경 반복으로 반복 속성을 설정 : 모든 이미지에 대해 개별적으로

FF 및 IE의 현재 버전 및 일부 다른 브라우저는 단일 CSS2 선언에서 여러 배경 이미지를 지원합니다. 이봐 http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ 그리고 여기 http://www.quirksmode.org/css/multiple_backgrounds.html 그리고 여기 http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

즉, 동작 추가를 고려할 수 있습니다. 이봐: http://css3pie.com/

예, 가능하며 인기있는 유용성 테스트 웹 사이트에서 구현되었습니다. 실버 백. 소스 코드를 살펴보면 배경이 서로 위에 놓인 여러 이미지로 구성되어 있음을 알 수 있습니다.

다음은 효과를 수행하는 방법을 보여주는 기사입니다. 비타민. 이 '양파 피부'층을 포장하는 비슷한 개념은 찾을 수 있습니다. 목록.

여러 배경 이미지를 원하지만 겹치지 않으려면이 CSS를 사용할 수 있습니다.

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

이 HTML 구조로 :

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>


#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

CSS3을 사용하여 여러 이미지를 쉽게 추가 할 수 있습니다. 여기에서 자세히 읽을 수 있습니다 http://www.w3schools.com/css/css3_backgrounds.asp

하나는 하나의 배경과 메인 페이지에 대한 상단에 대한 div를 가질 수 있고, 그 사이의 페이지 내용을 분리하거나 내용을 다른 z 레벨에 부유 식 Div에 넣습니다. 당신이하고있는 방식은 효과가있을 수 있지만, 당신이 만나는 모든 브라우저에서 작동 할 것이라고 의심합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top