我想为每个正方形网格获得磨砂玻璃效果,但我不想模糊 div 下的文本内容。到目前为止,我已经尝试使用 css 过滤器(模糊)但没有按预期工作。
我不知道如何对原始内容 ( <div class="post">
) 应用模糊滤镜效果并使用伪 :after
或 :before
添加内部阴影。
这就是我想要实现的: Frosted Glass - HTML CSS TWEAKS
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
background-color: #F8F8F8;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
box-sizing: border-box;
}
.container-fluid {
max-width: 1000px;
}
.navbar-default {
background-color: #fff;
}
.post {
padding: 15px;
margin-bottom: 20px;
background: #fff;
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.post h1 {
margin-top: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 22px;
}
.post .img-responsive {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row js--eqc-section">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="post js--eqc-item">
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="post js--eqc-item">
<h1>Expedita et, totam.</h1>
<p>Eaque quibusdam non veritatis nihil soluta animi repellendus rerum at alias provident, numquam sed doloremque quisquam iure recusandae natus, laudantium quis nostrum!
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="post js--eqc-item">
<h1>Omnis sit, recusandae.</h1>
<p>Earum incidunt in saepe cupiditate culpa reprehenderit atque, ab ipsum illum commodi nam nostrum quos blanditiis!</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="post js--eqc-item">
<h1>Veritatis, adipisci, molestias.</h1>
<p>Hic cupiditate temporibus, nulla modi asperiores nesciunt rerum debitis reprehenderit aut non commodi corporis.</p>
</div>
</div>
</div>
</div>
最佳答案
对于想立即知道答案的人,这里是我的代码片段,适用于我的案例。
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
background-color: #F8F8F8;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container-fluid {
max-width: 1000px;
}
.navbar-default {
background-color: #fff;
}
.post {
color: white;
padding: 15px;
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.blur_box {
z-index: 0;
position: relative;
overflow: hidden;
}
.blur_box:before {
content: "";
position: absolute;
width: 300%;
height: 300%;
left: -100%;
top: -100%;
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
filter: blur(20px);
z-index: -2;
}
.col-xs-12,
.col-sm-6,
.col-md-4 {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="blur_box">
<div class="post">
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officiis dolore ipsum similique!</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="blur_box">
<div class="post">
<h1>Expedita et, totam.</h1>
<p>Eaque quibusdam non veritatis nihil soluta animi repellendus rerum at alias provident, numquam sed.
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="blur_box">
<div class="post">
<h1>Voluptatum, odit, ipsam.</h1>
<p>Debitis esse minus ad, ex a perspiciatis sunt numquam ullam reiciendis sed similique amet nulla natus quos voluptas, itaque. A dolores asperiores fuga ratione, illum quas quo, doloremque provident repudiandae.</p>
</div>
</div>
</div>
</div>
关于html - 如何将磨砂玻璃应用于多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53041003/