logo标签列表

多个div使用同一个背景图像

htmlcssimage
8

我希望能够使用一张背景图片（1366x768）在多个div中使用。但是如果我使用：

.my_divs{
 background-image: url("image.jpg");
}

我只在每个 div 的左上角看到了图片的一部分。我想根据 div 的位置使用图片的相应部分。我可以在 div 上使用透明度，并将背景设置为 body。这样做是可行的，但在我的情况下，我已经在 body 上使用另一张图片作为背景图片了。
body{
 background-image: url("another_image.jpg");
}

有没有一种方法可以“看透”body并显示html的背景图片？还是另一个CSS技巧？ 编辑：添加简单示例
<style>
.mydivs{
    padding:30px;
    margin:30px;
    background-image: url("2.jpg");
}
body{
    background-image: url("1.jpg");
}
#container{
}
</style>
<body>
    <div id='container'>
        <div class='mydivs'>1</div>
        <div class='mydivs'>2</div>
        <div class='mydivs'>3</div>
    </div> 
</body>
抱歉，我不太清楚。 - Bhojendra Rauniyar
1
为所有相关元素添加一个父容器，然后将背景应用于它。例如：<div class="my_divs_container"><div class="my_divs"></div><div class="my_divs"></div></div>。 - Boaz
如果image.jpg是一个人的照片。如果我有3个相邻的div：我想让第一个显示头部，最后一个显示脚部。使用上面的background-image，我在每个div上都有头部。棘手的问题是我在每个div之间有空格，并且我希望它们根据body标签显示另一个background-image。 - bob dylan
正如Boaz所说，创建一个带有背景图像的父容器。然后在该div内创建三个子div。对于子div，将背景设置为透明。 - MrEhawk82
如果我这样做，就看不到body的background-image。（我的div之间有空格）基本上容器背景在body背景之上。 - bob dylan
我不确定这里的最佳实践。但是除了设置边距和字体系列之外，我很少编辑body标签。 - MrEhawk82
5个回答
12

我认为background-attachment属性可能适合你的需求。

请参考：http://www.w3.org/TR/CSS21/colors.html#background-properties

如果你使用background-attachment: fixed，背景图像将相对于视口固定。因此，如果你将其应用于多个元素，则就好像背景图像是通过页面上的“镜头”查看的。

如果你的页面有垂直滚动条，则当内容移动时，背景图像将保持固定（这可能不适合你的设计）。

.bgdeco {
  width: 700px;
  height: 100px;
  margin: 30px;
  border: 1px solid yellow;
  background-image: url(http://placekitten.com/2000/700);
  background-attachment: fixed;
  background-position: top center;
}
<div class="bgdeco"></div>
<div class="bgdeco"></div>
<div class="bgdeco"></div>

2

如果你知道要跨越多少个div，你可以使用background-position和一些简单的数学计算。看一下这个示例。

жҲ‘еҸҜд»ҘжүӢеҠЁжӣҙж”№жҜҸдёӘdivзҡ„background-positionпјҢдҪҶиҝҷзңҹзҡ„жҳҜе”ҜдёҖзҡ„ж–№жі•еҗ—пјҹ - bob dylan
我真的想不出其他方法来实现那种布局。 - Bart Jedrocha
1

HTML

<div id='container'>
<div id='divHead' class='mydivs'>&nbsp;</div>
<div id='divTorso' class='mydivs'>&nbsp;</div>
<div id='divLegs' class='mydivs'>&nbsp;</div>
</div>

CSS

#container {
background-image:url('myPic.jpg');
}
.mydivs {
background-color:transparent;
}
0

是的，您可以为包括body在内的任何HTML标记设置透明背景！ 您可以通过多种方式实现您的目标。

  1. 向HTML标签添加背景图像，并将background: none;设置为body和所有前导标记
  2. 您可以为要设置单个图像背景的所有div添加父div，然后将background-image添加到父div并将所有子div的background: none;设置为

请查看以下示例

html, body {
  padding: 0px;
  margin: 0px;
  }
body {
  background: red;
  }

#parent {
  background: url('http://thumb7.shutterstock.com/display_pic_with_logo/996335/251280085/stock-vector-abstract-polygonal-space-low-poly-dark-background-with-connecting-dots-and-lines-connection-251280085.jpg');
  background-size: cover;
  margin: 10px;
  padding: 10px;
  display: block;
  float: left;
  }
.child {
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  font-size: 40px;
  color: #fff;
  border: 2px solid #ccc;
  margin: 5px;
  }
<div id="parent">
 <div class="child">1</div>
 <div class="child">2</div>
 <div class="child">3</div>
 <div class="child">4</div>
 <div class="child">5</div>
 <div class="child">6</div>
 <div class="child">7</div>
</div>

-1

您可以使用 background-position: xpos ypos; 来调整图像的位置。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接