ホームページ > 記事 > ウェブフロントエンド > CSS3 フィルタリング効果の簡単な例

CSS3 フィルタリング効果の簡単な例

高洛峰オリジナル: 2017-03-04 10:41:291589ブラウズ

以下のエディターは、CSS3 フィルター効果の簡単な例を示します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして、一緒に見てみましょう

CSS3 フィルタリング効果の簡単な例

上の写真はCSS3の新機能のフィルター効果です。これらを学んだ後、美しさとハンサムを愛する大手ウェブ人は完璧に使用できるでしょうか。写真を美しくするためのコードはありますか? わかりました~~

それでは、まず写真の後ろにある白いフレームに注目してみましょう

<style>
#p1{   

　　　　　　　　　　/*给p定义宽高和颜色*/   


　　　　　　　　　　width: 200px;   
　　　　　　　　　　height: 250px;   
　　　　　　　　　　background: white;    

　　　　　　　　　/* 内填充距离照片为15px ，文字居中*/   
　　　　　　　　　　padding: 15px;   

　　　　　　　　　　text-align: center;   

　　　　　　/*　　把白色背景旋转-10deg  */   

　　　　　　　　　　-webkit-transform: rotate(-10deg);   

　　　　　　/*给背景一个阴影的效果*/   
　　　　　　　　　　box-shadow: 4px 4px 4px #666;   
　　　　　　　　　　float: left;   
　　　　　　　　　　}   



</style>
<BR>
<body><BR>
<p id="p1">
<img  src="img/001V28Mwty6Fww02IiNad&690.jpg" alt="CSS3 フィルタリング効果の簡単な例" >
<p>灰色滤镜</p>
</p>
<BR>
</body>

白い背景のフレームを書いたら、フィルターに行きましょう

まず、 1枚目、アーティスティックな写真です白黒

#p1 img{   

/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/   
width: 100%;　　　　　　　   
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　   
-webkit-filter: grayscale(1); 　　}

2枚目の写真、えーっと...古い写真です

#p1 img{   
            width: 100%;   
            -webkit-filter: sepia(1);   
        }

3枚目の写真、反転カラー？何色なのかも分かりません

#p1 img{   
            width: 100%;   
            -webkit-filter: hue-rotate(200deg);   
        }

4枚目の写真は白い霧の層で覆われているように見えます

#p1 img{   
            width: 100%;   
            -webkit-filter: opacity(0.5);   
        }

レンダリングにない写真もあります、それはぼかし効果ですコードは次のとおりです

#p4 img{   
            width: 100%;   
            -webkit-filter: opacity(0.5);   
        }

わかりました、フィルターの共有が完了しました。次は美しい写真に進みます

上記の css3 のフィルター効果の簡単な例は、css3 によって共有されるすべてのコンテンツです。エディターの参考になれば幸いです。また、中国語の Web サイトをさらにサポートしていただければ幸いです。

css3 フィルタリング効果のより簡単な例と関連記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：cssスタイルの詳細な記述例次の記事：cssスタイルの詳細な記述例

続きを見る