ぼやけた背景画像の上に画像を表示

Question

同じ画像の上に画像を表示しようとしていますが、背景がぼやけています。

.background-image { 
 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(10px); 
 
    height: 800px; 
 
    left: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 1; 
 
} 
 

 
.hero-image { 
 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
    display: block; 
 
}

<div class="background-image"></div> 
 
<div class="hero-image"></div>

本コードは、主人公の画像が表示されません。

divを別のdiv内に作成しようとしましたが、失敗しました。

提案がありますか？

ありがとうございます。

Answer 1

私は分かりませんが、なぜあなたはposition:fixedをbackground1にしたいのですか？これを以下の方法で行うことができます。

background2をbackground1 divにネストしようとすると、blurフィルタが両方の画像に適用されますが、そうしたくないと思います。

ポイント：

• あなたはheightとwidthを定義する必要がありbackground-imageを使用したときに、それ以外の場合はbrowserに表示されません。
• position: absoluteを使用すると、relativeの親のdivも同様にレイアウトを制御するのに役立ちます。

.parent { 
 
    position: relative; 
 
    height: 800px; 
 
    /* */ 
 
} 
 

 
.background-image { 
 
    background-image: url(http://lorempixel.com/output/nature-q-c-640-480-6.jpg); 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(10px); 
 
    width: 100%; 
 
    height: 800px; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
} 
 

 
.hero-image { 
 
    background-image: url(http://lorempixel.com/output/people-q-c-208-204-2.jpg); 
 
    background-size: cover; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    z-index: 10; 
 
    transform: translate(-50%, -50%); 
 
    display: block; 
 
}

<div class="parent"> 
 
    <div class="background-image"> 
 
    </div> 
 
    <div class="hero-image"></div> 
 

 
</div>

Answer 2

あなたにもヒーローのイメージfixedを配置するのを忘れました。このようにして、背景画像の上に重ねることができます。注文はz-indexを使用して保証されています。

以下では、オーダーの一貫性を保ち、最も重要な部分を最初に表示するようにスタイルを編集しました。要素の配置位置、サイズ、バックグラウンド、その他の要素について説明します。 2つの画像の重なりや違いを簡単に確認できます。

の-webkit-という接頭語は、not neededです。

.background-image { 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 750px; 
 
    
 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    
 
    filter: blur(5px); 
 
} 
 

 
.hero-image { 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 750px; 
 

 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
}

<div class="background-image"></div> 
 
<div class="hero-image"></div>