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

【问题标题】：How to use image as its own background-image?如何使用图像作为自己的背景图像？
【发布时间】：2017-02-03 05:15:32
【问题描述】：

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

我有这样的结构：

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

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

【问题讨论】：

标签： javascript jquery css wordpress

【解决方案1】：

如果你想要的是将img标签转换为de div标签背景，那么

$(".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 sn-p 但是

<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);
}

【讨论】：

这种方法几乎是我需要的。但实际上我需要原始图像高于模糊，以获得这种效果..
不幸的是我无法修改我的 html 结构.. 所以无法创建 blur-content div.. 看来你的旧 JS 方法很好，它在其背景图像属性中转换了图像.是否可以仅复制 scr= 属性并将其设置为单独的元素（以便能够应用过滤器）？或者在封面后的 div 中应用过滤器，并将图像 url 作为伪元素插入？我不知道什么适合..
可以的，只要你把模糊内容和带背景图片的分开，别忘了把相对css属性设置为父级，绝对属性设置为图片div就可以了你可以重叠它们，你可以用 jQuery 完成所有这些。
我通过您的解决方案进行了以下操作：hitsebeats.com/2016/09/…，但即使使用正确的 z-index，它现在也显示在之前......有什么想法吗？
嗨，看看这篇文章，stackoverflow.com/questions/24709915/…，它应该对你有帮助。查看您需要的元素和样式，然后使用我的 jQuery sn-p 的修改。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：