多背景圖片大小不同

我建立一個網站的朋友，目前有一個背景圖片使用以下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％的頁面，然後有其他照片或純白色背景覆蓋其餘部分。

我該怎麼做？我是否必須擺脫身體標記中的背景圖像並使用div來代替還是有更簡單的方法？

來源

2016-09-02 Gg8

大概不用身體，就像你說的那樣;也嘗試不同的高度。 – wazz

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>

來源

2016-09-02 09:08:52

你可以用CSS3使這個

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

http://www.css3.info/preview/multiple-backgrounds/

的主流瀏覽器當前版本支持它，浩如果你需要支持IE8或更低版本，那麼最好的解決方法是增加額外的div：http://caniuse.com/#search=multiple%20backgrounds

來源

2016-09-02 09:08:56 Provie9

另一種可能性，儘管它可能會把事情放在最後。

-webkit-background-size: 25%; 
-moz-background-size: 25%; 
-o-background-size: 25%; 
background-size: 25%;

來源

2016-09-02 09:11:23 wazz

多背景圖片大小不同

回答

相關問題