내가 친구를 위해 사이트를 구축하고 현재 하나 개의 배경 이미지 다음 CSS를 사용하여 몸을 커버해야 해요 :여러 배경 이미지 서로 다른 크기의
body {
background: url("backgroundOriginal.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow-x: hidden;
}
그가 그 사진의 약 25 %를 커버하고 싶어를 페이지를 연 다음 나머지 사진을 포함하는 평범한 흰색 배경이나 다른 사진이 있어야합니다.
어떻게하면됩니까? body 태그에서 배경 이미지를 없애고 대신 div를 사용하거나 쉬운 방법이 있습니까?
http://www.w3schools.com/css/css3_backgrounds.asp
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background:url(http://www.freeiconspng.com/uploads/flower-png-20.png);
background-size: 25%;
background-repeat: no-repeat;
padding:15px;
background-color: blue;
}
</style>
</head>
<body>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<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>당신은
http://www.css3.info/preview/multiple-backgrounds/
주요 브라우저의 최신 버전
body {
background-image: url(images/image1.png), url(images/image2.png);
background-repeat: repeat-x, repeat;
}
다른 가능성이 있지만, 아마도 바닥에 물건을 넣을 것입니다.
-webkit-background-size: 25%;
-moz-background-size: 25%;
-o-background-size: 25%;
background-size: 25%;
아마도 당신이 말한 것처럼 몸을 사용하지 마십시오. 또한 다른 높이를 시도하십시오. – wazz