代码之家 › 专栏 › 技术社区 › Penny Liu

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

css-filters blur css html

1

Penny Liu · 技术社区 · 7 年前

我想得到一个磨砂玻璃效果到每个正方形网格,但我不想模糊的文字内容下的div。到目前为止,我已经尝试使用css过滤器(模糊),但不是预期的工作。

我不知道如何在原始内容上应用模糊过滤效果( <div class="post"> )使用psesudo :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>

2 回复 | 直到 7 年前

1

Penny Liu 7 年前

对于想马上知道答案的人,这里是我的代码片段,它适用于我的案例。

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>

2

-4

William 7 年前

你可以在css中用不透明度来实现。

W3School opacity

.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;
}