オーバーレイテキストでぼやけた背景画像を表示したい

これは、ジャンボトロンを全幅にしたいので、コンテナから取り出しています。しかし、ジャンボトロンにテキストを適用すると、ジャンボトロンにもテキストがぼかされます。私は反対をして、別の<div>で私の背景イメージを投げてみましたが、私が以前持っていたようにそれが完全なスペースを占めるように管理することができませんでした。思考？オーバーレイテキストでぼやけた背景画像を表示したい

My codepen project...

html, body { 
 
    height: 100%; width: 100%; 
 
} 
 

 
.navbar-nav > li { 
 
    padding: 0px 25px 0px 40px; 
 
    margin: -15px 0px 0px 0px; 
 
    top: -25px; right: 30px; 
 
} 
 

 
.jumbotron { 
 
    width: 100%; 
 
} 
 

 
.jumbotron { 
 
    background:url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg"); 
 
    height: 100vh; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    -webkit-filter: blur(5px); 
 
    filter: blur(5.5px); 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: white; 
 
}

<body> 
 
    <!-- NAVIGATION BAR --> 
 
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
      </button> 
 
     <a class="navbar-brand text-center">Michael Adamski <br><span class="sub-brand">- Web Developer -</span></a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navbar-list"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li a href="home" class="active">Home</li> 
 
      <li a href="#about">About</li> 
 
      <li a href="portfolio">Portfolio</li> 
 
      <li a href="Contact">Contact</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <!-- End Navigation Bar --> 
 

 
    <!-- Header --> 
 
<div class="jumbotron"> 
 
<div class="container"> 
 
    <h1> This is my Page! </h1> 
 
    <p> This is an example of what I can do with my newfound knowledge</p> 
 
    
 
    
 

 
</body>

出典

2016-10-14 vin_Bin87

私はそれをどのように正確に行いますか？ .jumbotronクラスから背景画像を削除するか、擬似要素にぼかし効果を重畳しますか？ Imは偽のクラスやものにスーパーノーバイド... –

あなたは、単純な疑似クラスでこれを行うことができます - working fiddle

アイデアはぼかしが文句を言わない.jumbotronのdivの子供たちに影響を与えるので、それ自身の擬似要素に背景を置くことです。コンテンツの背後にバックグラウンドを配置するので、Zインデックスと位置の設定に特に注意してください。

.jumbotron { 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 
.jumbotron .container { 
    position: relative; 
    z-index: 2; 
    color: #ffffff; 
} 
.jumbotron:after { 
    content:""; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background:url("http://example.com/linktoimage.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    filter: blur(5.5px); 
    transform: scale(1.1); 
}

はまた、あなたがエッジに向けてフェードアウト「白」を得ることはありませんので、これはコンテナよりも背景がわずかに大きくなります、transform: scale(1.1);に気づきます。ラッパー.jumbotronは、画像オーバーフローを隠すためにoverflow: hidden;を持っています。

出典

2016-10-14 23:17:23 Jesse

魅力のように働いてくれてありがとう！ –

可能な解決策は、あなたがあなたの見出し、段落、および画像を配置その内部divでジャンボトロンを交換することである。

#bg { 
 
    position: absolute; 
 
    height: 100vh; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    -webkit-filter: blur(5px); 
 
    filter: blur(5.5px); 
 
    max-width: 100%; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    top: 15%; 
 
    width: 100%; 
 
} 
 

 
#header h1 { 
 
    margin-top: 20%; 
 
} 
 

 
#header p { 
 
    color: #fff; 
 
    margin-top: 25%; 
 
} 
 

 
#header p, #header h1 { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    color: #fff; 
 
    z-index: 100; 
 
}

<div id="header"> 
 
    <h1> This is my Page! </h1> 
 
    <p> This is an example of what I can do with my newfound knowledge</p> 
 
    <img id="bg" src="http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg"> 
 
</div>

ナビゲーションのパディングと余白を調整する必要がある場合があります。

出典

2016-10-14 22:55:58

オーバーレイテキストでぼやけた背景画像を表示したい

答えて

関連する問題