Question

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

主持：Godaddy管理WordPress 浏览器：谷歌浏览器我甚至尝试过Visual Composer - ＆gt;原始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>

Answer 1

尝试使用此代码并查看您是否先获得图像然后您可以打扰渐变是否正常工作..

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

Answer 2

<强>的style.css：446-449：

"S"<"T"

<强>的style.css：13850-13852：

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

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

.post元素的结果为z-index，而absolute和.post背后有td-main-content-wrap。

背景图片渐变叠加层无法在WordPress

2 个答案: