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

Question

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

我有这样的结构：

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

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

Answer 1

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

EDIT 那么Same 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>