纯 css 有可能吗?
Is it possible in a pure css?
我必须像这样在我的网站中做背景:
纯css有可能吗?我在 invision 中有检查模式,我可以读到它是
但是当我将此代码添加到我的 css 时,效果就不同了。在这里我可以看到 eclipse 线,我不知道如何在纯 css.
中获得这种效果
感谢任何建议。
尝试模糊效果,它可能适合您
.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;
}
<div class="blur"></div>
也许你可以尝试这样的事情:
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有可能吗?我在 invision 中有检查模式,我可以读到它是
但是当我将此代码添加到我的 css 时,效果就不同了。在这里我可以看到 eclipse 线,我不知道如何在纯 css.
中获得这种效果感谢任何建议。
尝试模糊效果,它可能适合您
.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;
}
<div class="blur"></div>
也许你可以尝试这样的事情:
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。