我创建了一组图 block 格式的图像,例如在一个 3 行的方框中连续 10 张图像。现在我希望我的图像 block 位于背景中并且也是透明的。我想在图像 block 的顶部再放置一个 div 元素。例如:我希望我的页面像这样:www.befunky.com
如果图像以图 block 形式排列,并且在其上方存在普通屏幕。背景图 block 图像可见。我知道他们可能为此使用了图片,但我的要求是我想使用 css 来完成。
我的代码如下:
<div class="in-section">
<div class="tiles tile1">
</div>
<div class="tiles tile2">
</div>
<div class="tiles tile3">
</div>
<div class="tiles tile4">
</div>
<div class="tiles tile5">
</div>
<div class="tiles tile6">
</div>
<div class="tiles tile7">
</div>
<div class="tiles tile8">
</div>
<div class="tiles tile9">
</div>
<div class="images">
</div>
</div>
我的CSS是:
.in-section{
margin-top:10px;
height:470px;
width:470px;
background-color:red;
margin-left:380px;
}
.tiles{
height:150px;
width:150px;
background-color:grey;
float:left;
border: 1px solid green;
}
.tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7 , .tile8, .tile9{
padding:2px;
margin:3px;
}
最佳答案
添加这些 CSS 样式。使用 z-index 将您的图像发送到 in 部分 div 后面。
.tiles{
position: relative;
z-index: -50;
}
.in-section{
background-color:rgba(255,0,0,.8); //rgba color for red with some transparency.
};
关于html - 如何使我的图像 block 在背景中透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23836264/