我可以使用 CSS 获得多个背景图像吗？

发布于 2024-07-11 00:21:24 字数 352 浏览 5 评论 0原文

可以有两张背景图吗？例如，我想让一个图像在顶部重复（repeat-x），并在整个页面上重复另一张图像（重复），其中整个页面上的图像位于顶部重复图像的后面。

我发现通过设置html和body的背景可以达到两个背景图像的预期效果：

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

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

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

原文

Is it possible to have two background images? For instance, I'd like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.

I've found that I can achieve the desired effect for two background images by setting the background of html and body:

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

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

Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情深如许 2024-07-18 00:21:24

CSS3 允许这种事情，它看起来像这样：

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

所有主要浏览器的当前版本现在都支持它< /a>，但是如果您需要支持 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;
}

CSS3 allows this sort of thing and it looks like this:

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, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

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

回复收藏 0 原文

羞稚 2024-07-18 00:21:24

我发现在一个 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。

The easiest way I have found to use two different background images in one div is with this line of code:

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

Obviously, that does not have to be for only the body of the website, you can use that for any div you want.

Hope that helps! There is a post on my blog that talks about this a little more in depth if anyone needs further instructions or help - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

回复收藏 0 原文

血之狂魔 2024-07-18 00:21:24

使用这种

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: 分别为每个图像设置重复属性

use this

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

a simple way to adjust you every image position with background-position: and set repeat property with background-repeat: for every image individually

回复收藏 0 原文

只有一腔孤勇 2024-07-18 00:21:24

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

回复收藏 0 原文

思慕 2024-07-18 00:21:24

是的，这是可能的，并且已由流行的可用性测试网站 Silverback 实施。如果您查看源代码，您会发现背景是由多个图像组成的，这些图像彼此叠置。

这是演示如何实现效果的文章，可以在上找到维生素。包裹这些“洋葱皮”层的类似概念可以在 A List Apart 上找到。

回复收藏 0 原文

一梦等七年七年为一梦 2024-07-18 00:21:24

如果您想要多个背景图像但不希望它们重叠，您可以使用此 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>

If you want multiple background images but don't want them to overlap, you can use this 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;
}

with this HTML structure:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

回复收藏 0 原文

天冷不及心凉 2024-07-18 00:21:24

#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

#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>

We can easily add multiple images using CSS3. we can read in detail here http://www.w3schools.com/css/css3_backgrounds.asp

回复收藏 0 原文