[英]How to make my tiles of images to be in background as transparent
I have created a group of images in a tiles format like 10 images in a row in a square box of 3 rows. 我创建了一组图块格式的图像,例如在3行的方形框中连续显示10张图像。 Now i want my tiles of images to be in background and also be transparent. 现在,我希望我的图像拼贴在背景中并且也是透明的。 I want to place one more div element over the top of the tiles of images. 我想在图像图块的顶部再放置一个div元素。 for ex: I want my page to be like as : www.befunky.com 例如:我希望我的页面像是:www.befunky.com
Where there are images arranged in tiles and over it a plain screen is present. 在瓷砖中排列有图像的地方,并在其上方提供了纯屏幕。 The background tiles images are visible. 背景图块图像可见。 I know they might have used an image for this but my requirement i want to do it using css. 我知道他们可能为此使用了图像,但是我的要求是我想使用CSS来完成。
My code is as follows: 我的代码如下:
<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>
My Css is: 我的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;
}
Add these CSS styles. 添加这些CSS样式。 Use z-index to send your images behind the in section div. 使用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.
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.