css - 如果我减少图像模糊，模糊图像与清晰图像重叠。我如何限制图像的重叠？

Question

如果我减少图像模糊，模糊图像会与清晰图像重叠。我如何限制图像的重叠？

请在这里查看我的附件

问题是第一张图片显示背景模糊图片!!

.effet {
	width: 400px;
	height: 125px;
	margin: 0 auto 50px auto;
}
.profile-box{
    width: 150px;
    height: 150px;
    margin-left: 40px;
    border: none !important;
    padding: 19.5px 10px;
    display: block;
}
.min_cir{
border-radius: 50%;
  border-radius: 50%;
    position: absolute;
    top: 0;
}
.filtre--r {
    -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
    -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
    -webkit-filter: blur(2px);
    mask: url('#mask-radial');
    filter: url('#filtre1');
	transform: scale(1.1);
    position: absolute;
    top: 0;
}

<div class="profile-box">
	<div class="media">
		<a class="pull-left" href="">
			<!--<img class="img-circle" src="">-->
			<div class="effet">
			<img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
			<img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg">
			</div>
		</a>
	</div>
</div>

两张图片重叠在一起..请帮帮我..

Answer 1

The problem is first image shows the background blur image !!

不，实际情况是模糊的图像变得部分透明。原来显示在上面的就是这个。

为避免这种情况，您可以在模糊图像上设置较低的 z-index，或者在非模糊图像之前声明其标签。

effet {
  width: 400px;
  height: 125px;
  margin: 0 auto 50px auto;
}
.profile-box {
  width: 150px;
  height: 150px;
  margin-left: 40px;
  border: none !important;
  padding: 19.5px 10px;
  display: block;
}
.min_cir {
  border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 0;
}
.filtre--r {
  -webkit-mask: -webkit-radial-gradient(center, closest-side, transparent 30%, black 80%);
  -webkit-mask: radial-gradient(closest-side at center, transparent 50%, black 110%);
  -webkit-filter: blur(2px);
  mask: url('#mask-radial');
  filter: blur(2px);
  transform: scale(1.1);
  position: absolute;
  top: 0;
}

<div class="profile-box">
  <div class="media">
    <a class="pull-left" href="">
      <div class="effet">
        <img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg" />
        <img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">

      </div>
    </a>
  </div>
</div>

effet {
  width: 400px;
  height: 125px;
  margin: 0 auto 50px auto;
}
.profile-box {
  width: 150px;
  height: 150px;
  margin-left: 40px;
  border: none !important;
  padding: 19.5px 10px;
  display: block;
}
.min_cir {
  border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  z-index: 1;
}
.filtre--r {
  z-index: 0;
  -webkit-mask: -webkit-radial-gradient(center, closest-side, transparent 30%, black 80%);
  -webkit-mask: radial-gradient(closest-side at center, transparent 50%, black 110%);
  -webkit-filter: blur(2px);
  mask: url('#mask-radial');
  filter: blur(2px);
  transform: scale(1.1);
  position: absolute;
  top: 0;
}

<div class="profile-box">
  <div class="media">
    <a class="pull-left" href="">
      <div class="effet">
        <img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
        <img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg">
      </div>
    </a>
  </div>
</div>