Question

我希望每个方格都具有毛玻璃效果，但我不想模糊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>

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中执行此操作。

W3School opacity

您在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;
}

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

2 个答案: