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

Question

我想在我的网站中创建新的 iOS 音乐应用效果，并在 css 中将其用作自己的background-image属性，并对其应用模糊效果。 我手动尝试过，但在我的图像中使用filter:blur()也会模糊孔 div。

我有这样的结构：

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

不幸的是，我不知道如何自动思考 javascript、jQuery 或 PHP。 我正在使用 WordPress，我想要的最终效果是：

Answer 1

如果你想要的是将img标签转换成de 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);
}

Answer 2

要仅模糊图像，请使用以下代码：

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

Answer 3

我不确定你到底在追求什么。 您的演示图像和结果描述似乎不一致。 根据你的描述，我认为你想要这样的东西。

 .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>