如何在css中創建疊加層？

Question

我想創建一個任意大小的div，然後在div上顯示一些東西。在CSS中定位和調整疊加層的最佳方式是什麼？

Answer 1

可以使用position:absolute到覆蓋定位您的div中，然後伸展它像這樣四面八方：

CSS^更新*

.overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color:rgba(0, 0, 0, 0.85); 
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */ 
    z-index:9999; 
    color:white; 
} 

你只需要確保你的父div有position:relative屬性添加到它和較低的z-index。

---

做了一個適用於以下評論者的適用於所有瀏覽器（包括IE7 +）的演示。

Demo

刪除從CSS的opacity屬性，而是使用的RGBA顏色，得到背景，只有背景，不透明度水平。這樣，覆蓋圖攜帶的內容不會受到影響。由於IE不支持rGBA，因此我使用了IE hack，而不是使用base64編碼的PNG背景圖像來填充覆蓋div，這樣我們就可以避免IE不透明問題，並將不透明度應用於子元素。

Answer 2

沒有看到你目前的HTML和CSS的例子快速的答案是使用的z-index

CSS：

#div1 { 
position: relative; 
z-index: 1; 
} 

#div2 { 
position: relative; 
z-index: 2; 
} 

哪裏DIV2是覆蓋

Answer 3

我會使用CSS屬性建議做這個。您可以使用position：absolute來將元素放置在另一個元素之上。

例如：

<div id="container"> 
    <div id="on-top">Top!</div> 
    <div id="on-bottom">Bottom!</div> 
</div> 

和CSS

#container {position:relative;} 
#on-top {position:absolute; z-index:5;} 
#on-bottom {position:absolute; z-index:4;} 

我想看看這個諮詢： http://www.w3schools.com/cssref/pr_class_position.asp

最後這裏是一個的jsfiddle給你看我的例子

http://jsfiddle.net/Wgfw6/

Answer 4

http://jsfiddle.net/55LNG/1/

CSS：

#box{ 
    border:1px solid black; 
    position:relative; 
} 
#overlay{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    right:0px; 
    background-color:rgba(255,255,0,0.5); 
} 

Answer 5

，我遲到了，但如果你想只使用CSS，這樣對任意元素沒有與定位，疊加的div等亂搞。，你可以使用內嵌框陰影：

box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5); 

這將適用於任何小於4000像素長或寬的元素。

例如：http://jsfiddle.net/jTwPc/

Answer 6

如果你不介意用z-index搞亂，但要避免增加額外的div爲疊加，你可以用下面的辦法

/* make sure ::before is positioned relative to .foo */ 
.foo { position: relative; } 

/* overlay */ 
.foo::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 0; 
} 
/* make sure all elements inside .foo placed above overlay element */ 
.foo > * { z-index: 1; } 

Answer 7

這裏是一個覆蓋使用僞元素（例如：無需添加更多的標記來做到這一點）

.box { 
 
    background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg); 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.box:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.4); 
 
}

<div class="box"></div>

Answer 8

我只是在codepen上玩弄類似的問題，這就是我使用簡單的css標記創建覆蓋圖的過程。我創建了一個應用於類的.box的div元素。在這個div裏面，我創建了兩個div，一個應用了.inner類，另一個應用了.notext類。 .box div中的這兩個類最初都設置爲display：none，但當.box懸停時，這些類都可見。

.box{ 
 
    height:450px; 
 
    width:450px; 
 
    border:1px solid black; 
 
    margin-top:50px; 
 
    display:inline-block; 
 
    margin-left:50px; 
 
    transition: width 2s, height 2s; 
 
    position:relative; 
 
    text-align: center; 
 
    background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG'); 
 
    background-size:cover; 
 
    background-position:center; 
 
    
 
} 
 
.box:hover{ 
 
    width:490px; 
 
    height:490px; 
 
} 
 
.inner{ 
 
    border:1px solid red; 
 
    position:relative; 
 
    width:100%; 
 
    height:100%; 
 
    top:0px; 
 
    left:0px; 
 
    display:none; 
 
    color:white; 
 
    font-size:xx-large; 
 
    z-index:10; 
 
} 
 
.box:hover > .inner{ 
 
    display:inline-block; 
 
} 
 
.notext{ 
 
    height:30px; 
 
    width:30px; 
 
    border:1px solid blue; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
} 
 
.box:hover > .notext{ 
 
    background-color:black; 
 
    opacity:0.5; 
 
    display:inline-block; 
 
}

<div class="box"> 
 
    <div class="inner"> 
 
    <p>Panda!</p> 
 
    </div> 
 
    <div class="notext"></div> 
 
</div>

希望這有助於！ :)歡迎任何建議。