我寫了下面的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>
讓你看到一個空白而不是圖像,或者你正在得到的圖像,但漸變不工作? –
@Dhaval - 只有空白,甚至沒有圖像,你可以看到它我上面提到的鏈接。 –