如何模糊div CSS的一部分
如何模糊div CSS的一部分
提问于 2018-06-06 03:31:02
我正在向我的网站添加一个部分/区块。字体覆盖在所有背景图片上看起来都不好。有时很难读懂文本。稍微模糊一下就能解决我的问题了。然而，根据我目前的代码和我尝试过的所有变体，它适用于远高于文本大小的模糊。如果我只对文本区域应用模糊，它不会形成一个完美的“正方形”，而将空白区域保留为原始背景颜色。一种高亮效果。
如何才能使它只模糊整个文本框？我一直在尝试获得一些看起来像这个人做过的东西：https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
我的CSS代码是：
* {
box-sizing: border-box;
}
beody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esction {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
}
.einto {
height: 50vh;
}
.econten {
display: table-cell;
vertical-align: middle;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}下面是我按原样应用它时发生的情况：https://postimg.cc/image/471owh7w7/
回答 1
Stack Overflow用户
发布于 2018-06-06 04:44:35
- 您的黑色
<div>应该具有position: absolute，并且您应该在样式中对其使用
。该<div>中的
- 将是包含您的文本(内容)的另一个
<div>，它应该具有position: relative和具有比黑色<div>.
更大值的z-index
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50707639
复制相关文章
相似问题