divの背景画像をぼかす方法divの残りのサイトやコンテンツをぼかすことはありません

divの背景画像をぼかす方法を理解しようとしています。目標はdivの背景イメージだけをぼかし、ページ自体や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/

私は高感謝します手助け！ここで

出典

2017-03-23 Kiril

このような何か？ [http://jsfiddle.net/p3LmaL2p/] –

が解決

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

出典

2017-03-23 14:53:54

これは動作していないようです... '.intro-body'がぼかしを止めなければならないようです。私は一緒にいくつかの他の例をマッシュし、私はこれを持っています：http：//jsfiddle.net/86vy48hv/ – Kiril

私の仕事のために、おそらくスタイルファイルを更新する必要があります.. –

例をフォークしてリンクを貼り付けることができますか？ – Kiril

私は、これはparent div,image and textを含み、divを使用する例を作成しました。私は内側その後、任意のpositionelementsへのプレゼントを適用しない場合は今、彼らはalign one after anotherますが、私はそれがabsoluteとしてpositionをだとfilterを使用して、あなたがimageへblurを適用することができ、その後、z-index alignそれらつまり、テキストを使用して設定したdivのbackgroundとしてimageを作るためにと画像。お役に立てれば。

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>

出典

2017-03-23 15:00:03 frnt

divの背景画像をぼかす方法divの残りのサイトやコンテンツをぼかすことはありません

答えて

関連する問題