CSSで背景画像をぼかすにはどうすればいいですか？ CSSで背景画像をぼかす方法の紹介-CSSチュートリアル-php.cn

CSSで背景画像をぼかすにはどうすればいいですか？ CSSで背景画像をぼかす方法の紹介

不言

リリース： 2018-10-26 14:27:46

オリジナル

21462 人が閲覧しました

ぼやけた背景画像を見ると、多くの友人が PS を使用してこの効果を実現することを考えると思います。では、背景画像のぼかした効果は CSS を使用して実現できますか?以下の記事ではCSSで背景画像のぼかしを設定する方法を紹介します。

フィルター属性は背景をぼかすときに使用します。フィルター属性のぼかしを使用して背景をぼかします。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300"    style="max-width:90%">
</body>
</html>

ログイン後にコピー

CSS の背景ぼかしの効果は次のとおりです:

CSSで背景画像をぼかすにはどうすればいいですか？ CSSで背景画像をぼかす方法の紹介

上記の方法は単純です。css を使用して背景画像をぼかします。もちろん、filter 属性も使用します。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<style>
  .mbl {
    width: 20em;
    height: 20em;
    background: url(image/girl.jpg);
    background-size: cover;
    overflow: hidden;
    margin: 30px;
}
.text {
    width: 18em;
    height: 18em;
    margin: 1em;
    background: hsla(0, 0%, 100%, .4);
    color: black;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.text::before {
    position: absolute;
    background: url(image/girl.jpg);
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: &#39;&#39;;
    filter: blur(4px);
    /*    background: rgba(225, 0, 0, 0.5);*/
}
.text p {
   height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
</style>
</head>
<body>
<div class="mbl">
        <div class="text">
          <p>图片上面的文字内容</p>
        </div>
    </div>
</body>
</html>

ログイン後にコピー

背景画像のぼかし効果は次のとおりです:

CSSで背景画像をぼかすにはどうすればいいですか？ CSSで背景画像をぼかす方法の紹介説明: 上記のコードは主に、ぼかした背景が配置されている疑似要素を通じて背景色または画像を設定することです。を設定し、領域相対配置と擬似要素絶対配置を使用して擬似要素を作成します。サイズは元の領域のサイズとまったく同じで、ぼかしフィルターを使用してぼかします。効果は上記のようになります。。