1. 首页
  2. 问答
  3. 我可以使用CSS制作多个背景图片吗？

我可以使用CSS制作多个背景图片吗？

2009-01-08 78 views
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

+4

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

1

您可以为顶部带有一个背景，另一个用于主页，并将它们之间的页面内容分离，或将内容放置在另一个z级别的浮动div上。你这样做的方式可能会奏效，但我怀疑它会在你遇到的每一个浏览器中都起作用。

来源

2009-01-08 03:44:13

4

是的，这是可能的，并已被流行的可用性测试网站Silverback实现。如果您仔细查看源代码，可以看到背景由多个图像组成，并放置在彼此的顶部。

这里是文章演示如何做的效果可以在Vitamin找到。在A List Apart上可以找到用于包裹这些“洋葱皮”层的类似概念。

来源

2009-01-08 03:51:09

3

其实还有一个article，它告诉你如何与CSS文件IE过滤器来做到这一点。

我希望它很有用。

来源

2010-11-13 03:12:20

4

如果你想多背景图片，但不希望他们重叠，你可以使用这个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

32

我发现最简单的方法在一格中使用两个不同的背景图像是用这行代码：

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

22

使用本

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

2 

#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

相关问题

 相关问题