Question

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

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

一个额外的div标签，引用Wordpress自定义css文件，其中包含指向透明图像（.png）的css元素，当用户提交背景图像时，该元素可以放在listing_banner图像的前面（http://www.myvipclubs.com/test/submit-listing/）。问题：使用div类.full_detail_overlay_image时，透明图像位于listing_banner图像和文本上方。只希望图像更暗，而不是文本。假设需要一个类来清除css样式并且不影响文本。
修改现有的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，使它位于上面。

在这个例子中，我使用了一个rgba背景：before元素。当然可以更改.15值以使色调更加不透明。如果你真的必须使用透明的png而不是rgba背景，但我个人喜欢使用rgba，如果我需要支持旧的浏览器，可以使用rgba。

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

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

1 个答案: