背景圖像上的透明顏色覆蓋覆蓋了表單域

Question

我正在使用透明顏色覆蓋在表單字段的頂部，也指定了背景圖像。

我遇到的問題是顏色疊加或背景圖像位於窗體的頂部，並阻止訪問窗體域。

.frame {
    background: url(http://lorempixel.com/g/400/200) no-repeat;
    width: 200px;
    padding: 50px 80px;
    position: relative;
}
.frame:after {
    background: rgba(0,0,0,0.3);
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

我在這里遇到類似的問題，關於background-image和background-color與透明度的結合使用，但我想我的場景與游戲中的表單字段有點不同。

如果你有興趣，這是我的JSFiddle 。

Answer 1

因為.frame:after是一個新元素（雖然它沒有在HTML代碼中顯示），但是你實際上是在整個表單上放置了一個塊級元素，它會占用表單的所有點擊事件。 要解決這個問題，您可以使用CSS屬性pointer-events ，特別是將其設置為none 。 這將有效地指示所有點擊通過元素並影響其下面的任何內容。

.frame:after {
    background: rgba(0,0,0,0.3);
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;

    //add this!
    pointer-events: none;
}

編輯

如果您擔心瀏覽器兼容性，只需切換應用背景圖像的順序 - 在偽元素上設置背景圖像並將其z-index設置為-1 ，並為框架提供透明的黑色背景。

.frame {
    background: rgba(0,0,0,0.3);    
    width: 200px;
    padding: 50px 80px;
    position: relative;
}
.frame:after {
    background: url(http://lorempixel.com/g/400/200) no-repeat;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: -1; /* put it behind the frame */
}

正如@Havenard指出的那樣，如果您的完整網站為了設計目的而使用z-index ，這可能會讓您感到悲傷，並且可能需要調整其他一些z-index值才能正常工作。

Answer 2

很明顯，使用:after背景上繪制alpha :after將會錯過所需的效果，因為它不會影響單獨的背景，而是整個元素包含其中的所有內容。

但你可以隨時采用舊時尚方式，多層，每層都有自己的背景。 您可以將圖像作為背景元素，並在其中創建具有透明背景的新元素，然后將字段放入其中。

這就是你擁有的：

http://jsfiddle.net/zVqE2/9/