CSS3 フィルタリング効果の簡単な例-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-04 10:41:29

オリジナル

1623 人が閲覧しました

以下のエディターは、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 サイトに注目してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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