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

今回は、CSS3 フィルター 属性 と、CSS3 フィルター 属性 を使用する際の 注意事項 について詳しく説明します。実際のケースを見てみましょう。

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

1. 定義

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

<style>
    img{
　　　　　　/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3フィルター属性の詳しい説明" >

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

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

グレースケール

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

1. saturate

2. hue-rotate色相回転

3. invert反転

4. 不透明度

5. 明るさ明るさ

6. コントラスト

7. ぼかし

8. ドロップシャドウ

9. 例:

10. ここで使用されるセピア調整

     
         <meta>
          <title>Title</title>
          <style>
              .img{
                 -webkit-filter:sepia(70%);
              } 
          </style>
      
     
     <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3フィルター属性の詳しい説明" >
     <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3フィルター属性の詳しい説明" >
     

example

写真

：

3. 例

以下に、フィルター属性のいくつかの値の例を示します。その他の興味深いものがある場合は、私と共有してください。 1)hue-rotate(色の回転)

効果は写真に示されています。具体的な効果は皆さん次第です。 Blur (ぼかし効果、単位 px)

     <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  
  
  <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3フィルター属性の詳しい説明" >
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3フィルター属性の詳しい説明" >
 

サンプル画像:

(3) invert invert

invert invert は画像をネガのように見せます。これ以上言っても無駄です。コードを見てください。 :

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  
  <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3フィルター属性の詳しい説明" >
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3フィルター属性の詳しい説明" >
 

例の写真:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

CSS でテキスト省略をカスタマイズする方法

CSS で属性値の継承を使用する方法

以上がCSS3フィルター属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。