背景图像渐变叠加在 WordPress 中不起作用答案

【问题标题】：Background image gradient overlay not working in WordPress背景图像渐变叠加在 WordPress 中不起作用
【发布时间】：2016-05-15 20:18:32
【问题描述】：

我编写了下面的 html 代码来制作带有渐变叠加的背景图像。这可以完美地作为独立的，但是当我在 wordpress 帖子中使用时，它不起作用。我只能看到一个空白区域。

托管：Godaddy 托管 WordPress 浏览器：谷歌浏览器我什至在 Visual Composer -> Raw HTML 中尝试过。 链接： http://padals.com/t2/

<html>
<head><style>
.bg-img {
  width: 100%;
  height: 100%;
    background: #3e3e3e;
    bottom: 0;
    box-shadow: rgba(0,0,0,.07) 0 2px 0;
    left: -34px;
    overflow: hidden;
    position: absolute;
    right: -34px;
    top: -100px;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: -1;
  }
  .bg-img:after {
      background: rgba(0,0,0,.43);
    background: -webkit-linear-gradient(top,rgba(0,0,0,.57) 0,rgba(0,0,0,.21) 100%);
    background: -moz-linear-gradient(top,rgba(0,0,0,.57) 0,rgba(0,0,0,.21) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,.57) 0,rgba(0,0,0,.21) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,.57) 0,rgba(0,0,0,.21) 100%);
    box-shadow: inset rgba(0,0,0,.26) 0 3px 0,inset rgba(0,0,0,.21) 2px 0 0,inset rgba(0,0,0,.26) 0 -1px 0;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
    }
.bg-img img {
    filter: blur(42px);
    -webkit-filter: blur(42px);
    -moz-filter: blur(42px);
    -ms-filter: blur(42px);
    filter: url(http://static.saavncdn.com/_i/3.0/blur.svg#blur);
    left: 50%;
    margin: -56% 0 0 -56%;
    position: absolute;
    top: 50%;
    width: 112%;
    z-index: 10;
}
img {
    border: 0;
    display: block;
    margin: 0;
}
</style></head>
<body>

<div class="bg-img"><img src="http://padals.com/wp-content/uploads/2016/05/Baahubali_poster.jpg" alt="" /></div>

</body>
</html>

【问题讨论】：

所以您看到的是空白而不是图像，或者您正在获取图像但渐变不起作用？
@Dhaval - 只有空白，甚至没有图片，你可以在上面提到的链接中看到它。

标签： html wordpress css wordpress-theming

【解决方案1】：

尝试使用此代码，看看你是否先得到图像，然后你可以为渐变工作而烦恼..

<img src="<?php echo content_url('/uploads/2016/05/my_photo.jpg'); ?>" alt="My Picture">

【讨论】：

仅供参考 - php 代码无法在 WordPress 页面中运行，如果我删除了样式表 (CSS)，那么我可以看到图像。
php 代码将在 wordpress 页面中工作，以从上传文件夹中获取正确的图像，现在正如您所说，它是使用的样式表和渐变属性的问题，我们将不得不对此进行诊断，看看有什么可以成为这里的问题

【解决方案2】：

style.css:446-449:

.td-main-content-wrap,
.td-category-grid {
    background-color: #fff;
}

style.css:13850-13852:

.post {
    background-color: #fff;
}

从.td-main-content-wrap 和.post 中删除background-color: #fff; 定义。

您在absolute 元素上有一个否定的z-index，它位于.post 和td-main-content-wrap 后面。

【讨论】：