CSS를 사용하여 여러 개의 배경 이미지를 가질 수 있습니까?
두 개의 배경 이미지를 가질 수 있습니까?예를 들어, 하나의 이미지를 위에서 반복하고(반복-x), 다른 이미지를 전체 페이지에서 반복하고(반복), 전체 페이지에서 반복하고(반복), 전체 페이지에서 반복되는 이미지는 위에서 반복됩니다.
html과 body의 배경을 설정하면 두 개의 배경 이미지에 원하는 효과를 얻을 수 있습니다.
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
이것이 "좋은" CSS입니까?더 좋은 방법이 있습니까?그리고 만약 제가 세 개 이상의 배경 이미지를 원한다면요?
CSS3는 이러한 종류의 것을 허용하며 다음과 같이 보입니다.
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
현재 모든 주요 브라우저의 최신 버전이 이를 지원하지만 IE8 이하를 지원해야 하는 경우에는 추가 div를 사용하는 것이 가장 좋습니다.
<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;
}
내가 찾은 가장 쉬운 방법은 다음 코드 라인을 사용하여 하나의 디비에서 두 개의 다른 배경 이미지를 사용하는 것입니다.
body {
background:url(image1.png) repeat-x, url(image2.png) repeat;
}
분명히, 그것은 웹사이트의 본문만을 위한 것이 아니라, 당신이 원하는 모든 디비에 사용할 수 있습니다.
도움이 되길 바랍니다!제 블로그에는 추가 지침이나 도움이 필요한 사람이 있다면 이에 대해 조금 더 깊이 있게 이야기하는 게시물이 있습니다 - 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/ 을 보세요.
IE의 경우 동작 추가를 고려할 수 있습니다.여기를 보세요: http://css3pie.com/
예, 가능하며 인기 있는 사용적합성 테스트 웹 사이트 실버백에서 구현했습니다.소스 코드를 통해 보면 배경이 여러 개의 이미지로 구성되어 있고 서로 겹쳐져 있음을 알 수 있습니다.
비타민에서 효과를 볼 수 있는 방법을 보여주는 기사가 있습니다.이러한 '양파 피부' 층을 포장하는 유사한 개념은 A 목록에서 찾을 수 있습니다.
여러 개의 배경 이미지가 중복되지 않도록 하려면 다음 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와 메인 페이지의 div를 가지고 그들 사이에 페이지 내용을 분리하거나 다른 z-수준의 부동 div에 내용을 넣을 수 있습니다.당신이 하는 방식은 효과가 있을지 모르지만, 당신이 접하는 모든 브라우저에서 효과가 있을지는 의문입니다.
언급URL : https://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css
'programing' 카테고리의 다른 글
| 함수 nodejs의 mariadb에서 반환 값 (0) | 2023.08.08 |
|---|---|
| Powershell에서 인증된 웹 요청을 만드는 방법은 무엇입니까? (0) | 2023.08.08 |
| jQuery의 사용자 지정 이벤트? (0) | 2023.08.08 |
| 매개 변수를 허용하는 expressjs 미들웨어 생성 (0) | 2023.08.08 |
| 정규식 빈 문자열 또는 전자 메일 (0) | 2023.08.08 |