Question

我必须在我的网站上完成这样的背景：

纯css有可能吗？我在检查中有检查模式，我可以读到它的

但是当我将此代码添加到我的CSS时，效果是不同的。在这里我可以看到日食线，我不知道如何在纯css中获得这种效果。

感谢您的任何建议。

Answer 1

尝试模糊效果它可能适合你

＆＃13;

.blur {
  background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  filter: blur(13px);
  position: absolute;
  height: 300px;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
}

＆＃13;

<div class="blur"></div>

＆＃13;

Answer 2

也许你可以尝试这样的事情：

div {
  position: relative;
  height: 200px;
  width: 200px;
}

div.background {
  height: 80%;
  width: 80%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: #eee;
  position: absolute;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<div>
  <div class="background"></div>
</div>

使用背景颜色和背景div的大小来满足您的需求。

纯粹的CSS会有可能吗？

2 个答案: