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会错过所需的效果，因为它不会影响单独的背景，而是整个元素包含其中的所有内容。

但你可以随时采用旧时尚方式，多层，每层都有自己的背景。你可以将一个元素与图像作为背景，在里面创建一个具有透明背景的新元素，然后将你的字段放在其中。

那就是你所拥有的：

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

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

2 个答案:

修改