CSS3フィルター属性の詳しい説明-CSSチュートリアル-php.cn

CSS3フィルター属性の詳しい説明

小云云

リリース： 2017-12-19 10:38:34

オリジナル

2224 人が閲覧しました

私は最近、フィルター属性という非常に強力な CSS3 属性を発見しました。P ピクチャが好きな友人なら、名前を見ればこれがどのようなアーティファクトであるかわかるはずです。もちろん、この属性の効果はPSの比ではありませんが、うまく使えばスペースを節約しながら1枚の絵を2枚分の効果にすることができます。この記事では、CSS3 の強力なフィルター属性に関する関連情報を中心に紹介します。必要な方は参考にしていただければ幸いです。

1. 定義

フィルター。文字通りフィルターを意味します。公式のフィルター属性は、要素 (通常は ) の視覚効果を定義します。例:

<style>
    img{
　　　　　　/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img src="img/boke.png" alt="">

ログイン後にコピー

。この効果を見て、ブロガーの皆さんもフィルターに興味を持ち始めているでしょうか？

ご覧のとおり、属性には多くのオプションの値があります。

グレースケール

セピアブラウン(レトロな古い写真の雰囲気)
saturate
hue-rotate色相回転
invert反転
不透明度透明度
明るさ明るさ
contrastコントラスト
ぼかし
drop-shadow
例:

 <head>
     <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .img{

             -webkit-filter:sepia(70%);
          } 
      </style>
  </head>
 <body>
 <img src="img/boke.png" alt="">
 <img class="img" src="img/boke.png" alt="">
 </body>

ログイン後にコピー

画像例:

3. 例

以下、フィルター属性のいくつかの値の例を示します。他にも興味深いものがあれば、私と共有してください

(1)hue-rotate (色の回転)。

効果は写真に示されています:

     <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  </head>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

ログイン後にコピー

効果の画像:

(2)blur (ぼかし)

blur (ぼかし効果、単位ピクセル)

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

ログイン後にコピー

。サンプル画像:

(3) invert 反転カラー

invert 反転カラーは画像をネガにします。これ以上言っても無駄です。コードを見てください:

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>

ログイン後にコピー

サンプル画像:

みんな楽しいと思いますか？急いで試してみてください。