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

Posted

技术标签:

【中文标题】我可以使用 CSS 制作多个背景图片吗?【英文标题】:Can I have multiple background images using CSS? 【发布时间】:2010-09-30 04:56:25 【问题描述】:

是否可以有两个背景图像?例如,我想让一个图像在顶部重复(repeat-x),另一个在整个页面上重复(repeat),其中整个页面上的图像在顶部重复的图像后面。

我发现可以通过设置html和body的背景来实现两张背景图片想要的效果:

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


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

这是“好”的 CSS 吗?有没有更好的方法?如果我想要三个或更多背景图片怎么办?

【问题讨论】:

【参考方案1】:

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;

【讨论】:

最新版本的 Firefox、Chrome、Safari 和 Opera 支持多种背景。 IE9 也将支持它。 en.wikipedia.org/wiki/… 如果您希望有不同的重复/位置设置,您可以这样做:css3.info/preview/multiple-backgrounds 对于 IE8 - IE6,您可以使用 PIE.js。 webdesign.tutsplus.com/tutorials/htmlcss-tutorials/… 背景大小是否遵循同样的规则?我希望我的所有背景图像都是全高,除了其中一个(我想成为图像高度)。 是的,背景尺寸遵循相同的规则(与所有其他背景属性一样)。背景属性(通常以前缀 background- 开头,然后是背景的特定属性)实际上可以在背景属性本身中指定,因此由于支持多个背景图像,因此也支持多个列出的属性。这适用于大小、位置、重复等。【参考方案2】:

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

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

显然,这不一定只用于网站的主体,您可以将其用于您想要的任何 div。

希望对您有所帮助!如果有人需要进一步的说明或帮助,我的博客上有一篇文章会更深入地讨论这个问题 - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div。

【讨论】:

请注意,这仅适用于背景,不适用于背景图像【参考方案3】:

使用这个

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;

使用 background-position: 调整每个图像位置的简单方法:并使用 background-repeat: 为每个图像单独设置重复属性

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案5】:

是的,这是可能的,并且已由流行的可用性测试网站Silverback 实施。如果您查看源代码,您可以看到背景是由几张图片组成的,它们相互叠加。

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

【讨论】:

【参考方案6】:

如果您想要多张背景图片但又不希望它们重叠,您可以使用这个 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>

【讨论】:

【参考方案7】:

#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

【讨论】:

【参考方案8】:

您可以将一个 div 用于顶部,一个背景,另一个用于主页,并将它们之间的页面内容分开,或者将内容放在另一个 z 级别的浮动 div 中。您这样做的方式可能有效,但我怀疑它是否适用于您遇到的每个浏览器。

【讨论】:

以上是关于我可以使用 CSS 制作多个背景图片吗?的主要内容,如果未能解决你的问题,请参考以下文章

CSS:在一个元素上缩放和旋转多个 SVG 背景图像 - 没有 JS 可能吗?

Photoshop制作雪碧图技巧

css3按钮背景颜色无限过渡

css圆角矩形的制作

css代码如何把背景图旋转

我们可以制作一个使用多个图像进行预测的卷积网络吗