私はバックグラウンドの写真がぼんやりしているようにしたい

私は背景がぼやけているようにしようとしていますが、これを試すと、ページ上のすべてがぼやけてしまいます。私はバックグラウンドの写真がぼんやりしているようにしたい

<!DOCTYPE html> 
<html> 
<head> 
    <title>Website</title> 
    <link rel="stylesheet" type="text/css" href="style2.css"> 

</head> 
<body> 
    <div class="profil-box"> 
    <img src="bilder/Anders.jpg" class="profil-bilde"> 
     <h1> Anders Magnus Klingsholm </h1> 
      <h5> CV </h5> 
    </div> 
</body> 
</html> 

html { 
    background: url(bilder/copenhagen1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.profil-box { 
    width: 400px; 
    height: 400px; 
    background: rgba(0,0,0,0.4); 
    padding: 40px; 
    color: white; 
    margin: 0 auto; 
    margin-top: 140px; 
    text-align: center; 
    font-family: "Helvetica Neue", sans-serif; 
} 
.profil-bilde { 
    border-radius: 50%; 
    height: 200px; 
    width: 200px; 
}

出典

2017-01-07 Scooby

完全にすべてのブラウザでサポートされていません。ぼやけた背景が必要な場合は、PhotoshopやGimpのようなプログラムで画像をぼかすことをお勧めします。 – CriticalTheWizard

はい、問題は、子要素に影響を与えることなく、HTMLまたは本文にぼかしを適用できないことです。背景画像を保持する1つのdivを作ることができます。 – sinisake

あなたはそのためのCSSフィルターを使用することができます。

img { 
    -webkit-filter: blur(4px); 
    filter: blur(4px); 
}

あなたが背景を埋めるためのdivを作成することができ、体内で使用することはできませんとして：

#back { 
 
\t \t background: url(http://placekitten.com/g/800/600) no-repeat center center fixed; 
 
\t \t position: absolute; 
 
\t \t top: 0px; 
 
\t \t bottom: 0px; 
 
\t \t left: 0px; 
 
\t \t right: 0px; 
 
\t \t filter: blur(4px); 
 
\t }

<div id="back"></div>

出典

2017-01-07 16:23:47 MarioZ

を

さて、与えられた情報によると... もしぼかし効果を持つ背景画像を設定したい場合は、既にぼかした画像を配置することをお勧めします。
...
filterを適用するCSSプロパティがあります。
どこでも実際にはサポートされていないことがわかりますhere。

ページ全体に固定された背景を設定する例：

#my_bg_block { 
    width: 100%; 
    height: 100vh; 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: url(path/to/my/image) center center no-repeat; 
    background-size: cover; 
    filter: blur(15px); 
}

出典

2017-01-07 16:35:44 AymDev

画像をぼかすために、CSSフィルターを使用しての主な問題は、それがすべての子ノードに影響を与えることです。実際の背景をぼかす代わりに。別のイメージを置き、z-インデックスと絶対位置を使用してバックグラウンドとして配置します。

z-index: -1; 
position: absolute;

他の背景を透明に設定することも忘れないでください。 CSSで画像をぼかし

.background-blurred { 
 
    -webkit-filter: blur(4px); 
 
    filter: blur(4px); 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    z-index: -1; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-size: 24px; 
 
    padding: 15px; 
 
}

<div> 
 
<div class="content"> 
 
    <p> Content of the website</p> 
 
</div> 
 
<img class="background-blurred" src="https://source.unsplash.com/random/800x800" /> 
 
</div>

出典

2017-01-07 16:38:37 LordNeo

私はバックグラウンドの写真がぼんやりしているようにしたい

答えて

関連する問題