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

我写了下面的html代码来制作具有渐变叠加的背景图像。这是完全独立工作，但当我在wordpress后，它不工作。我只能看到一个空白区域。背景图像渐变叠加在WordPress中不起作用

托管：Godaddy托管WordPress 浏览器：谷歌Chrome 我甚至尝试在Visual Composer - >原始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>

来源

2016-05-15 JAMUNARANI S

让你看到一个空白而不是图像，或者你正在得到的图像，但渐变不工作？ –

@Dhaval - 只有空白，甚至没有图像，你可以看到它我上面提到的链接。 –

尝试n使用这个代码，看看，如果你第一次得到的图像，然后你可以理会梯度工作或不..

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

来源

2016-05-15 12:00:59

仅供参考 - php代码不能在WordPress页面中运行，如果我删除了样式表（CSS），则可以看到图像。 –

php代码将在wordpress页面中工作以从uploads文件夹中获取正确的图像，现在您已经说过它是使用样式表和渐变属性的问题，我们将不得不诊断并查看可能存在的问题 –

的style.css ：446-449：

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

风格的CSS：13850-13852：

.post { 
    background-color: #fff; 
}

从.td-main-content-wrap从.post取出background-color: #fff;定义。

对于absolute元素，您有一个负的z-index，并将其放在.post和td-main-content-wrap之后。

来源

2016-05-15 12:18:32 aifrim

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

回答

相关问题