如何将磨砂玻璃应用于多个元素

Question

我想为每个正方形网格获得磨砂玻璃效果，但我不想模糊div下的文本内容。到目前为止，我已经尝试使用css过滤器(blur(，但没有按预期工作。

我不知道如何对原始内容(<div class="post">(应用模糊过滤器效果，并使用psesudo:after或:before添加内部阴影。

这就是我想要实现的：磨砂玻璃-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>

Answer 1

对于想要立即知道答案的人，以下是适用于我的案例的代码片段。

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>

Answer 2

您可以在不透明度的css中做到这一点。

W3学校不透明

你的css代码是：

.post {
opacity: 0.8;
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:hover{
opacity: 1;
}

如果您希望<div class="post">中的文本与opacity不在一起，请尝试使用：

.post h1{
z-index: 1;
}

或

.post h1{
opacity: 1 !important;
}