多个 div 的一张背景图片

bob*_*lan 7 html css image

我想使用 1 张背景图片 (1366x768) 在多个 div 中使用。但如果我使用:

.my_divs{
 background-image: url("image.jpg");
}
Run Code Online (Sandbox Code Playgroud)

我在每个 div 上只有图像的左上角。我想使用基于 div 位置的图像部分。我可以在 div 上使用透明度并将背景设置为body.

它会工作,但在我的情况我已经使用background-imagebody与其它图像。

body{
 background-image: url("another_image.jpg");
}
Run Code Online (Sandbox Code Playgroud)

有没有办法“透视”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>
Run Code Online (Sandbox Code Playgroud)

Mar*_*det 10

我认为该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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="bgdeco"></div>
<div class="bgdeco"></div>
<div class="bgdeco"></div>
Run Code Online (Sandbox Code Playgroud)