如何将图像添加为自己的背景图像属性？

Question

在Wordpress中，我想复制帖子的图像，所以我可以将其中一个设置为背景，然后模糊它，创建一个很好的效果，而不必更改我的所有html结构。

如果可能的话，我怎么能用PHP做到这一点？我很久以前尝试用JQuery实现，但当时我没有成功：

$(".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();
});

如果我使用Jquery，我应该在哪里实现它？

我的结构是

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

最后的结果应该是这样的：

Answer 1

可能是这样的：

$( document ).ready(function() {
  $('.post-cover img').each(function() {
    $(this).before('<img src="'+ $(this).attr('src')+'" class="blur">');
  });
});

.post-cover {
	position: relative;
}
.post-cover img {
	width: 250px;
	height: auto;
	display: block;
	position: relative;
	padding: 50px;
}

.post-cover img.blur {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-filter: blur(25px);
	filter: blur(25px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
  <img src="https://placeimg.com/640/480/arch">
</div>

Answer 2

为此，您需要将img源设置为容器div和blur的背景。但是，由于这将模糊所有子元素，您需要将原始的img元素移动到.post-cover之外并将其绝对放置以使其仍然清晰。试试这个：

$(".post-cover").each(function() {
  var $cover = $(this);
  var $img = $cover.find("img");
  
  $cover.css({
    backgroundImage: "url('" + $img.prop("src") + "')",
    width: $img.width(),
    height: $img.height()
  });
  
  $img.insertAfter(this).css({
    position: 'absolute',
    top: $cover.offset().top,
    left: $cover.offset().left
  })
});

.post-cover {
  -webkit-filter: blur(10px);
  filter: blur(15px);
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
  <img src="https://i.imgur.com/mE2HyxV.jpg" />
</div>