CSS3 のフィルター属性の概要-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 のフィルター属性の概要

不言

Jul 02, 2018 am 10:11 AM

css3filter

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

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

1. 定義

フィルター、文字通りフィルターを意味します。正式に定義されたフィルター属性は、要素（通常は CSS3 のフィルター属性の概要）の視覚効果を定義します。

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

2. 構文フィルター: なし| saturate() | sepia() url();

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

グレースケール

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

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

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

サンプル画像:

3. 例

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

(1) 色相。 - 回転 (色の回転)

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

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

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

サンプル画像:

(3) invert invert

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

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

サンプル写真:

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。