1

我正在使用还指定了背景图像的表单字段顶部的透明颜色叠加层。

我遇到的问题是颜色叠加或背景图像位于表单顶部并阻止对表单字段的访问。

.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 。

4

2 回答 2

2

因为.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调整一些其他值才能正常工作。

于 2013-10-10T03:56:17.010 回答
2

很明显，使用:after在背景上绘制 alpha 会错过预期的效果，因为它不会单独影响背景，而是会影响整个元素，其中包含所有内容。

但是你总是可以用老式的方式来做，多层，每一层都有自己的背景。您可以拥有一个以图像为背景的元素，并在其中创建一个具有透明背景的新元素，然后将字段放入其中。

这就是你所拥有的：

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

于 2013-10-10T04:08:37.510 回答