css 如何向背景添加形状和模糊[已关闭]

aurhwmvo  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(135)

已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗?**更新问题,使其仅关注editing this post的一个问题。

3天前关闭。
Improve this question
我想在左右两边加两个圆圈,还想加一个背景模糊,就像这个图像,谁能教我怎么做
我想在两边添加两个模糊的圆圈,就像这个图像Want Like This

jc3wubiy

jc3wubiy1#

你可以使用svg背景。你不能在背景中添加css过滤器。你也可以使用伪元素来代替背景。
超文本标记语言

<div class="module">
  <div class="module-inside">
    Module
  </div>
</div>

CSS

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}
.module {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: #ff43ea;
  position: relative;
}
.module::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
  background-size: cover;
  filter: blur(4px);
}
.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}

相关问题