允許div內容爲覆蓋圖的「infront」：::

之後我有一個頁腳，它是紫色的，但也有一個頁腳覆蓋圖像，我使用:: after選擇器顯示：允許div內容爲覆蓋圖的「infront」：::

footer::after { 
    content: ""; 
    background: url(/wp-content/themes/atheme/images/footermask.png); 
    opacity: 0.1; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: 100; 
}

我在頁腳中有通常的鏈接和社會項目，但:: after掩碼導致它們不可點擊。作爲一項解決方案，我絕對定位了這些元素，並給了它們更高的z索引，但它導致了其他與位置有關的問題，我覺得它不是正確的方法。

這些元素如何不能絕對定位，但仍然超過overlay :: after mask？

例這裏：https://jsfiddle.net/g88ucp7k/的

來源

2015-09-16 Lovelock

首先，從::after
刪除z-index: 100;包裝您的頁腳內容裏面position:relative DIV
設置z-index到的內容，以覆蓋...的重疊:)

footer { 
 
    padding: 50px 0; 
 
    width: 100%; 
 
    background-color: purple; 
 
    overflow: hidden; 
 
} 
 
footer .content{ /* ADDED */ 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
footer a{ 
 
    color: white; 
 
} 
 
footer::after { 
 
    content: ""; 
 
    background: url(http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/05/shards_pattern.jpg); 
 
    opacity: 0.4; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    /* z-index: 100; REMOVED */  
 
    height: 125px; 
 
}

<footer> 
 
    <div class="content"> 
 
     <a href="#">A link</a> 
 
    </div> 
 
</footer>

來源

2015-09-16 08:52:33

允許div內容爲覆蓋圖的「infront」：::

回答

相關問題