Question

我想要实现类似于此处所示的效果：

图层的排序方式如下：

背景
环
白色叠加
箱
文本

很容易，除了盒子应取消白色叠加层，使圆圈更清晰。

这些层不一定非常精确，其他东西可能也有效。

如果它有所不同，圆圈实际上是.png图像;盒子一个div。此外，盒子将有圆角。

＆＃34;清除＆＃34;框是width: 100%的{{1}}，因此这需要是动态的。此外，＆＃34;模糊＆＃34;部分只需要超过圆圈，实际上，这是一个png图像。此图像将根据屏幕尺寸等移动，因此任何一个固定位置都不起作用。

这个想法的灵感来自于mbhs.edu，在那里可以看到我要描述的效果，其中有一个圆形印章的图像 - 不，不是动物 - 这是＆＃34;模糊了＃34 ;;图像本身具有低对比度和高亮度。然后，在该图像的顶部，有第二个图像。第二张图片没有被模糊掉＃34; - 它是第一部分，只是没有对比度/颜色变化。将第二张图像放在如上所示的盒子上，以产生我正在寻找的效果。我只是想知道是否有一些方法可以做到这一点，不是2张图片，而是一张＆amp;的CSS。

如果只使用CSS，我真的很喜欢它，因为我对JS / JQ一无所知，但是，如果他们需要，那就这样吧。

Answer 1

我们只能用svg和剪辑CSS3属性来做css。唯一的问题是你必须知道如何管理svgs。如果你需要修剪剪裁的形状，那么你需要使用javascript（可能还有一些svg操作框架）。

＆＃13;

body,
html {
  background: green;
  height: 100%;
  width: 100%;
  padding: 0;
}
.theClip {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .4);
  -webkit-clip-path: url(#clippath);
}
section {
  position: absolute;
  top: 100px;
  left: 100px;
}
.circle {
  width: 100px;
  position: absolute;
  top: 20px;
  left: 100px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <img class="circle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Disc_Plain_red.svg/2000px-Disc_Plain_red.svg.png" alt="">

  <div class="theClip">

  </div>
  <section>
    TEXT random TEXT
  </section>

  <svg id="Layer_1">
    <defs>
      <clippath id="clippath">
        <path d="M5,32v327.333h474.667V32H56z M419.333,280H132.667V59.333
	h286.667V280z" />
      </clippath>
    </defs>
  </svg>
</body>

</html>

＆＃13;

＆＃34;雾过＆＃34;图像无处不在，但在div下使用CSS

1 个答案: