背景图像上的透明颜色覆盖覆盖了表单域

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/