Question

我试图弄清楚如何模糊div的背景图像。目标是仅模糊div的背景图像，而不是页面本身的背景或div内容。

这是一个示例div：

<header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

CSS：

body {
  width: 100%;
  height: 100%;
  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  background-color: black;
}

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
}

.intro .background-image {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.intro .intro-body {
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
}

这是包含我试过的CSS的JS小提琴： http://jsfiddle.net/80jzdvqp/

我非常感谢一些帮助！

Answer 1

这是解决方案

abstract class Model
{


    protected static function getDB()
    {
        static $db = null;

        if ($db === null) {
            $dsn = 'mysql:host=' . Config::DB_HOST . ';dbname=' . Config::DB_NAME . ';charset=utf8';
            $db = new PDO($dsn, Config::DB_USER, Config::DB_PASSWORD);


            $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        }

        return $db;
    }
}

Css：

<body><header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
</body>

Answer 2

我使用div创建了一个示例，其中包含parent div,image and text。现在，如果我不将任何position应用于elements，那么他们将align one after another，但image为background div我将position设置为absolute并使用filter，您可以将blur应用于image，然后使用z-index align，即文字和图片。希望这会有所帮助。

filter属性提供模糊等图形效果，锐化或变色元素。过滤器通常用于调整图像，背景和边框的渲染。

div{
  width:200px;
  height:200px;
  overflow:hidden;
  position:relative;
}
div > img{
  width:auto;
  height:100%;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
  filter:blur(10px);
}
div > p{
  text-align:center;
  top:60px;
  z-index:9;
  position:relative;
}

<div>
<p>Demo text.Demo text.Demo text.Demo text.Demo text.</p>
<img src="https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg">
</div>

如何模糊div的背景图像，而不模糊剩余的网站或div的内容

2 个答案: