CSS3のfilter属性の詳細説明-CSSチュートリアル-php.cn

CSS3のfilter属性の詳細説明

零下一度

リリース： 2017-07-02 11:12:25

オリジナル

1890 人が閲覧しました

この記事では、CSS3 の強力なフィルタープロパティの詳細な説明に関する関連情報を主に紹介します。必要な友人は参照してください

ブロガーは最近、ウェブサイトを構築する過程で非常に強力な CSS3 を発見しました。属性はフィルター属性です。P ピクチャーが好きな友人は、名前を見ればこれがどのようなアーティファクトであるかがわかるはずです。もちろん、この属性の効果はPSの比ではありませんが、うまく使えばスペースを節約しながら1枚の絵を2枚分の効果にすることができます。

1. 定義

フィルタ、文字通りフィルタを意味します。例を挙げると、公式に定義されたフィルタ属性は、要素（通常は）の視覚効果（ぼかしや彩度など）を定義します。 :

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

ログイン後にコピー

この効果を見て、ブロガーはフィルターに興味を持ち始めたでしょうか？

2. 構文: なし | 色相反転() | | opacity() | sepia() url(); ご覧のとおり、属性には何を意味しますか?

グレースケール

セピアブラウン(レトロな古い写真の雰囲気)

saturate
hue-rotate色相回転
invert反転
不透明度透明度
明るさ明るさ
contrast コントラスト
ぼかし
ドロップシャドウ
例:
ここで調整を使用します

rrreええ例写真

3. 例

以下に、フィルター属性のいくつかの値の例を示します。興味深いものがあれば、私をフォローしてください。一緒にシェアしましょう

(1)色相回転(色の回転)具体的な効果は写真に示されています:

 <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>

ログイン後にコピー

効果の画像:

（2）Blur（blur）

blur（ぼかし効果、ユニットPx）

rreee -sample画像：

（3）逆色の逆逆色が回転する画像をネガにしますこれ以上言っても無駄だと思います、コードを見てください:

     <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>

ログイン後にコピー

画像例: