可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm trying to figure out how to blur the background image of a div. The goal is to only blur the background image of the div and not the background of the page itself or the div contents.

Here is an example 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>

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

Here is the JS fiddle containing the CSS I've tried: http://jsfiddle.net/80jzdvqp/

I would high appreciate some help!

回答1:

Here is the solution

<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>

Css :

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

.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: 100%;
    background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

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

回答2:

I have created a example using div, this includes a parent div,image and text. Now if I don't apply any position to elements present inside then they will align one after another, but to make image as background of div I have set it's position as absolute and using filter you can apply blur to the image and then using z-index align them i.e text and image. Hope this helps.

The filter property provides graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

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>