![](/img/trans.png)
[英]How can I make my website's background transparent without making the content (images & text) transparent too?
[英]How to make my tiles of images to be in background as transparent
我創建了一組圖塊格式的圖像,例如在3行的方形框中連續顯示10張圖像。 現在,我希望我的圖像拼貼在背景中並且也是透明的。 我想在圖像圖塊的頂部再放置一個div元素。 例如:我希望我的頁面像是:www.befunky.com
在瓷磚中排列有圖像的地方,並在其上方提供了純屏幕。 背景圖塊圖像可見。 我知道他們可能為此使用了圖像,但是我的要求是我想使用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.
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.