我想使用 1 个背景图像 (1366x768) 在多个 div 中使用。但如果我使用:
.my_divs{
background-image: url("image.jpg");
}
我只有每个 div 上图像的左上角。我想使用基于 div 位置的图像部分。
我可以在 div 上使用透明度并将背景设置为body
.
它会起作用,但就我而言,我已经在使用background-image
for body
与另一张图像。
body{
background-image: url("another_image.jpg");
}
有没有办法“看透”body
并显示html
背景图 ?或者另一个 CSS 技巧?
EDIT: 添加简单的例子
<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>
我觉得background-attachment
房产也许能帮到你。
See: http://www.w3.org/TR/CSS21/colors.html#background-properties 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)