在用户提交的背景图像上添加过滤器或透明 .png

Question

在修改 WordPress 页面模板时寻求帮助，该模板允许用户提交场地列表/帖子并包含用作背景图像的图像。问题是，当用户使用名为“listing_banner”的自定义字段提交图像时，根据用户随列表提交的背景图像，提交的图像可能难以从背景图像中读取白色文本.这是一个示例列表的链接：http://www.myvipclubs.com/test/city/detroit/listing/v-at-mgm-grand-detroit/

寻求帮助以将以下内容之一添加到现有代码中：

1. 引用 Wordpress 自定义 css 文件的附加 div 标记，该文件包含指向透明图像 (.png) 的 css 元素，当用户提交背景图像时，该透明图像 (.png) 可以放置在 listing_banner 图像前面(http://www.myvipclubs.com/test/submit-listing/)。 问题：当使用 div 类 .full_detail_overlay_image 时，透明图像位于 listing_banner 图像和文本之上。只希望图像更暗，而不是文本。假设需要有一个类可以清除 css 样式并且不影响文本。

2. 修改现有的 css。背景图像 (.full_width_detail) 的样式，其中包含用于更改用户提交的任何图像的过滤器。

使用任一可能的解决方案寻找某人以使用 css 或透明图像作为覆盖来帮助获取正确的代码。

Answer 1

你不需要额外的 div 元素，你可以通过使用 before 或 after 伪元素来做到这一点。

我很快就使用下面的 css 整理了一个示例 jsFiddle。

.full_width_detail:before {
    height: 600px;
    background-image: url(http://images4.fanpop.com/image/photos/16100000/Cute-Kitten-kittens-16122946-1280-800.jpg);
    background-size: cover;
    position:relative;
    padding: 50px;
}
.full_width_detail:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1
}

h1 {
    text-align:center;
    color: #fff;
    z-index: 2;
    position: relative;
}

您需要确保您的 div 元素是相对定位的，并且伪元素 .full_width_detail:before 是绝对定位的，并且给定的 z-index 高于 div 的 z-index，以便它位于上方。

在本例中，我为 :before 元素使用了 rgba 背景。如果您愿意，当然可以更改 .15 值以使色调更加不透明。如果你真的需要，你可以使用透明 png 代替 rgba 背景，但如果我需要支持旧版浏览器，我个人更喜欢使用 rgba。

div 的内容在这种情况下，文本需要相对定位，并且 z-index 高于 .full_width_detail:before。