如何使用图像作为自己的背景图像？

-1

我想在我的网站上创建新的iOS音乐应用效果，并在css中将它作为自己的background-image属性使用，并在其上应用模糊处理。我尝试手动，但在我的图片中使用filter:blur()也模糊洞div。如何使用图像作为自己的背景图像？

我有这样的结构：

<div class="post-cover"> 
<img src="#"/> 
</div>

不幸的是，我不知道如何自动化想的JavaScript和jQuery或PHP。我使用WordPress和最终效果，我想拥有的是：

来源

2016-09-26 Henrique Barcelos

如果你想要的是img标签转换成德div标签brackground，然后

$(".post-cover").each(function(){ 
    var img = $(this).find("img"); 
    $(this).css({ 
    "background-image": "url('"+img.prop("src")+"')", 
    //Any other CSS background propriety 
    //If your div don't have a fixed width and height 
    width: img.width(), 
    height: img.height() 
    }); 
    img.remove(); 
});

对于你的CSS用户模糊效果的下一个样式：

.post-cover{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

编辑所以后来同样的JS代码片段，但

<div style="position: relative;"> 
    <div class="blur-content"> 
    </div> 
    <div class="post-cover"> 
    <img> 
    </div> 
</div> 

.post-cover{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.blur-content{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

来源

2016-09-26 00:15:45 Makarov

这种做法几乎是我所需要的。但实际上我需要原始图像在模糊之上，才能获得该效果。 –

看看我编辑的注释 – Makarov

不幸的是，我无法修改我的html结构..所以'blur-content' div无法创建。看起来你的旧JS方法很好，它将图像转换为背景图像属性。难道只是复制'scr ='属性并将其设置为单独的元素（以便能够应用过滤器）？或者在后期div中应用过滤器，并将图像url作为伪元素插入？我不知道什么会适合.. –

模糊只图像使用此代码：

.post-cover img { 
    filter:blur(); 
}

来源

2016-09-26 00:19:15 Nach

我不知道你是什么之后。您的演示图像和结果描述似乎不一致。从你的描述中，我想你想要这样的东西。

.post-cover { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 300px; 
 
} 
 

 
.post-cover #bg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    filter: blur(8px); 
 
    z-index: -1 
 
} 
 

 
.post-cover #orig { 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; right: 0; 
 
    margin: auto; 
 
}

<div class="post-cover"> 
 
    <img id="bg" src="http://placekitten.com/g/200/300"/> 
 
    <img id="orig" src="http://placekitten.com/g/200/300"/> 
 
</div>

来源

2016-09-26 01:03:07 JonSG

如何使用图像作为自己的背景图像？

回答

相关问题