我可以使用CSS製作多個背景圖片嗎？

299

是否可以有兩個背景圖像？例如，我希望在整個頁面上重複一個圖像（repeat-x），並在整個頁面上重複一個圖像（重複），其中整個頁面的一個圖像在整個頁面上重複一個圖像。我可以使用CSS製作多個背景圖片嗎？

我發現我可以通過設置html和身體的背景下實現了兩個背景圖片預期的效果：

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

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

這是「好」的CSS？有更好的方法嗎？如果我想要三個或更多的背景圖像呢？

來源

2009-01-08 Rudd Zwolinski

368

CSS3允許這樣的事情，它看起來像這樣：

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

The current versions of all the major browsers now support it，但是如果你需要支持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; 
}

來源

2009-01-08 03:45:22 nickf

+27

最新版本的Firefox，Chrome，Safari和Opera支持多種背景。它也將在IE9中得到支持。 http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets） – 2010-10-30 23:44:56

如果你想有不同的重複/位置設置，你可以這樣做：http://www.css3.info/preview/multiple-backgrounds/ – Krisc 2011-03-05 19:56:32

您可以爲頂部帶有一個背景，另一個用於主頁，並將它們之間的頁面內容分離，或將內容放置在另一個z級別的浮動div上。你這樣做的方式可能會奏效，但我懷疑它會在你遇到的每一個瀏覽器中都起作用。

來源

2009-01-08 03:44:13

是的，這是可能的，並已被流行的可用性測試網站Silverback實現。如果您仔細查看源代碼，可以看到背景由多個圖像組成，並放置在彼此的頂部。

這裏是文章演示如何做的效果可以在Vitamin找到。在A List Apart上可以找到用於包裹這些「洋蔥皮」層的類似概念。

來源

2009-01-08 03:51:09

當前版本的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/

來源

2010-10-30 23:00:16 Shannon

其實還有一個article，它告訴你如何與CSS文件IE過濾器來做到這一點。

我希望它很有用。

來源

2010-11-13 03:12:20

如果你想多背景圖片，但不希望他們重疊，你可以使用這個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>

來源

2011-02-02 07:28:46 rachel

我發現最簡單的方法在一格中使用兩個不同的背景圖像是用這行代碼：

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

Obviou狡猾，這不一定只針對網站的主體，您可以將其用於任何您想要的div。

希望有幫助！如果有人需要進一步的指導或幫助，我的博客上有一篇文章深入探討了這一點 - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div。

來源

2011-03-11 02:48:28 TheLibzter

使用本

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; 
}

一種簡單的方式來調整你的背景位置的每個圖像的位置：設置重複屬性與背景重複和：每個圖像單獨

來源

2013-07-23 08:27:10

#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

來源

2016-04-06 18:05:05 Rinku

我可以使用CSS製作多個背景圖片嗎？

回答

相關問題