コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > css3 フィルター属性を使用して画像に曇りガラスのぼかし効果を追加する例

css3 フィルター属性を使用して画像に曇りガラスのぼかし効果を追加する例

高洛峰
リリース： 2017-03-23 11:11:46
オリジナル
3311 人が閲覧しました

画像のぼかし効果の処理をプロジェクトに記録します。 要件: 背景画像は img タグを介して渡され、アバターは円形である必要があります。

サンプル画像:

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

HTML コード: 

<div class="introBox">
    <!--个人头像-->
    <div class="imgShow">
        <img class="imgBground" src="resources/images/1.jpg" alt="">
        <ul class="details">
            <li class="smallImg">
                <img class="roundImg" src="resources/images/1.jpg" alt="">
            </li>
            <li><p class="uname">吕良伟</p></li>
            <li><p class="cellPhone">13218888888</p></li>
        </ul>
    </div>
</div>
ログイン後にコピー

CSSコード: 

/*背景图模糊效果*/
.imgBground{
    width:100%;
    height:28vh;
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(5px); /* Chrome, Opera */
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */
}
.details{position:absolute; left:0; right:0; top:8%; margin:auto;}/*调整个人信息的位置*/
.smallImg{width:100px; height:100px; margin:2% auto; overflow:hidden;}
/*把头像处理成圆形*/
.roundImg{display:block;width:100px; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
ログイン後にコピー

CSS3 フィルター属性について、マニュアルでは次のように紹介されています

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Brightness

明るさフィルターは、画像の明るさを制御するために使用されます。パラメーターで受け入れられる値は 0 以上です。 0% は純粋な黒を出力し、100% 出力は画像の元の明るさです。100% を超えると、画像の明るさを 1.5 倍に高めることができます (150%)。 HTML: 

<div id="container">
    <img class="imgA" src="images/1.jpeg" alt="">
    <img class="imgB" src="images/1.jpeg" alt="">
</div>
ログイン後にコピー

CSS: 

#container{width:600px; height:800px;}
#container img{width:200px;}
.imgB{
    filter:brightness(150%); /*firefox*/
    -webkit-filter:brightness(150%);/*chrome, safari, opera*/
}
ログイン後にコピー

レンダリング (サポートされている Chrome、Firefox、Opera、Safari、どのバージョンの IE もサポートしていません)

css3 filter属性给图片添加毛玻璃模糊效果实例介绍コントラスト

コントラスト フィルターは、画像のコントラストを制御するために使用されます。明るさフィルターと同様に、パラメーターは 0 以上の値を受け入れます。このフィルター ミラーは、CSS 画像の暗い部分と明るい部分の差を制御します。したがって、0% に設定するとグレー、100% は元の画像となり、100% を超えると画像のコントラストがさらに向上します

CSS: 

.imgA{
    filter:contrast(80%);
    -webkit-filter:contrast(80%);
}
.imgB{
    filter:contrast(150%);
    -webkit-filter:contrast(150%);
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍グレースケール

グレースケール フィルターは、画像のグレースケールを制御するために使用されます。このフィルター ミラーは、画像内のすべての色を徐々に灰色の色合いに変換します。0% に設定すると効果がなく、100% にするとすべて灰色になります。負の値は許可されません

CSS: 

.imgA{
    filter:grayscale(30%); /*firefox*/
    -webkit-filter:grayscale(30%);/*chrome, safari, opera*/
}
.imgB{
    filter:grayscale(80%); /*firefox*/
    -webkit-filter:grayscale(80%);/*chrome, safari, opera*/
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍彩度


彩度フィルターは画像の彩度を制御します。0% に設定すると画像からすべての色が完全に削除され、100% に設定すると元の画像のように見えます。100% を超えると画像が飽和します。負の値はありません。許可されています

CSS: 

.imgA{
    filter:saturate(30%); /*firefox*/
    -webkit-filter:saturate(30%);/*chrome, safari, opera*/
}
.imgB{
    filter:saturate(150%); /*firefox*/
    -webkit-filter:saturate(150%);/*chrome, safari, opera*/
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍ブラウンセピア

セピアフィルターは、画像の茶色のトーンを制御するために使用されます。これは、画像をレトロスタイルの古い写真効果に調整することを意味します。写真効果

CSS: 

.imgA{
    filter:sepia(50%); /*firefox*/
    -webkit-filter:sepia(50%);/*chrome, safari, opera*/
}
.imgB{
    filter:sepia(100%); /*firefox*/
    -webkit-filter:sepia(100%);/*chrome, safari, opera*/
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍色相回転


色相回転フィルターは、画像のすべての色に色相回転を適用します。 0deg に設定した場合は効果がありません。360deg を超えると、1 サイクルと同等になります。つまり、90deg と 450deg を設定した場合の効果は同じになります。

反転

反転フィルターは、設定値に応じて反転します。100% に設定すると、反転しません。

CSS: 

.imgA{
    filter:hue-rotate(90deg); /*firefox*/
    -webkit-filter:hue-rotate(90deg);/*chrome, safari, opera*/
}
.imgB{
    filter:hue-rotate(150deg); /*firefox*/
    -webkit-filter:hue-rotate(150deg);/*chrome, safari, opera*/
}
ログイン後にコピー
css3 filter属性给图片添加毛玻璃模糊效果实例介绍

ぼかしぼかし

ぼかしフィルターは画像にガウスぼかしを適用し、色をブレンドして画像の端に分配します。このフィルターに渡される半径パラメーターによって、ブレンドが画面上で何ピクセル進むかが決まります。値が大きいほど、ぼかし効果がより明確になります。このフィルターはパーセンテージ

CSS:

を除く任意の長さの値を受け入れることができます。

.imgA{
    filter:blur(1px); /*firefox*/
    -webkit-filter:blur(1px);/*chrome, safari, opera*/
}
.imgB{
    filter:blur(0.5em); /*firefox*/
    -webkit-filter:blur(0.5em);/*chrome, safari, opera*/
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

透明度Opacity

Opacity滤镜使图像变透明，取值0%时，完全透明；取值100%时，完全不透明。这个滤镜跟已知的opacity属性相似，唯一的区别就是性能，opacity滤镜属性在支持硬件加速的浏览器上性能会更好

CSS：

.imgA{
    filter:opacity(25%); /*firefox*/
    -webkit-filter:opacity(25%);/*chrome, safari, opera*/
}
.imgB{
    filter:opacity(75%); /*firefox*/
    -webkit-filter:opacity(75%);/*chrome, safari, opera*/
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

阴影Drop Shadow

Drop Shadow滤镜增加了一个阴影效果，此属性需要X和Y的偏移，以及隐隐的颜色，也可以设置一个模糊半径

CSS：

.imgA{
    filter:drop-shadow(5px 5px 10px #666); /*firefox*/
    -webkit-filter:drop-shadow(5px 5px 10px #666);/*chrome, safari, opera*/
}
.imgB{
    filter:drop-shadow(10px 10px 10px #eee); /*firefox*/
    -webkit-filter:drop-shadow(10px 10px 10px #eee);/*chrome, safari, opera*/
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

URL()

虽然我们讨论过的所有的滤镜非常有用，他们其实是通用的滤镜，但是你的项目可能需要更多的效果，如果上面滤镜没有能满足你的要求的，你可以创建自己的SVG滤镜然后使用其id通过url()引用。

HTML:

<div id="container">
    <img class="imgA" src="images/1.jpeg" alt="">
    <img class="imgB" src="images/1.jpeg" alt="">
</div>
ログイン後にコピー

CSS:

.imgA{
    filter: url(&#39;#greenish&#39;);
    -webkit-filter: url(&#39;#greenish&#39;);
}
.imgB{
    filter:url(&#39;#bluish&#39;);
    -webkit-filter: url(&#39;#bluish&#39;);
}
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

组合滤镜和动画滤镜(Combining and Animating Filters)

您也可以组合多个滤镜来获得各种效果。在大多数情况下，滤镜的顺序并没有多大关系。但是如果在灰度滤镜后再加上一个褐色滤镜，还是会显示一个灰度图像。

CSS:

.imgB{
    -webkit-animation: haunted 3s infinite;
    animation: haunted 3s infinite;
}
 
@keyframes haunted {
    0% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    48% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    50% {
        -webkit-filter: sepia(1) contrast(2) brightness(200%);
        filter: sepia(1) contrast(2) brightness(200%);
    }
    60% {
        -webkit-filter: sepia(1) contrast(2) brightness(200%);
        filter: sepia(1) contrast(2) brightness(200%);
    }
    62% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    96% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    96% {
        -webkit-filter: brightness(400%);
        filter: brightness(400%);
    }
ログイン後にコピー

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

（有动态效果，但是截图的缘故，只能看静态的了）

以上がcss3 フィルター属性を使用して画像に曇りガラスのぼかし効果を追加する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 filter属性
ソース：php.cn
前の記事：IE6メソッドコードに対応したCSSレスポンシブレイアウトの詳細説明 次の記事：CSSを使用して幅と高さが不明な要素に背景画像を追加する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
JSON ネスト配列プロパティ「project_id」と「project_name」を変更する方法 问题：[{"project_id":1,"project_name":"CDP","role":&q...
から 2024-04-06 15:39:51
0
1
466
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート