如何使用不覆盖表单域的背景图像？

Question

我的一页有几个部分。其中一个部分是联系表。

<div class="watermark">
    <section>1</section>
    <section>1</section>
    <section>1</section>
    <section>... here is a form</section>
</div>

该页面有一张图片作为背景，就像水印一样。我使用以下 css

添加它

.watermark::after {
    content: "";
    background: url(my_watermark.png) no-repeat;
    opacity: 0.1;
    top: 10%;
    left: 10%;
    bottom: 0;
    right: 0;
    background-size: 50%;
    position: fixed;
  }

现在的问题是水印挡住了表单中的字段，所以只能点击左侧的字段。

如果我尝试单击进入字段右侧的字段，则为 "blocked"

这是一个活生生的例子：https://jsbin.com/xomowakuvi/edit?html,css,output

如何解决？滚动时每个部分都应显示背景图像。这就是为什么我使用 position: fixed

Answer 1

问题与分层有关。只需在您的 ::after 上设置 -1 的 z-index 以将其定位 'behind' 您的内容，从而允许选择您的内容而不是水印：

.watermark::after {
  z-index: -1;
}

如何使用不覆盖表单域的背景图像？

How can you use a background image that does not cover form fields?

html

css

forms

background-image