CSS の基本スキル - Filter_html/css_WEB-ITnose さん-htmlチュートリアル-php.cn

CSS の基本スキル - Filter_html/css_WEB-ITnose さん

WBOY

リリース： 2016-06-24 11:51:53

オリジナル

1301 人が閲覧しました

博篇前回のブログ全般の基本的な使い方、CSSでのフィルターや画像加工についてお話しましょう。 Web ページ、特にいくつかの企業の公式 Web サイトを開くと、ホームページはいつもフラッシュやたくさんの写真の組み合わせだと思っていましたが、CSS フィルターを覚えたので読みたいと思います。とてもゴージャスなページも作成できます。

CSS フィルターはブラウザのプラグインではなく、CSS 標準に準拠するものでもありません。ブラウザの機能を拡張するために Microsoft が特別に開発し、ブラウザの範囲が広いため、IE ブラウザに統合されます。 CSS フィルターは、本文内の他の CSS ステートメントと同じであり、非常にシンプルです。

1. フィルターのプロパティ

実際、フィルターは単純な透明ですが、その効果は非常に優れているため、適用頻度は非常に高くなります。

1. アルファチャンネル

.alpha{      filter:alpha(opacity=50)     //表示透明度为50%}

ログイン後にコピー

2. ぼかし

<span style="font-size:14px;">.blur{     filter:progid:DXImageTransform.Morcrosoft.blur(pixelradius=4,makeshadow=false);}</span>

ログイン後にコピー

3. 透明色

.chorma{      filter:chromalcolor=FF6800;}

ログイン後にコピー

4. 反転

.flip1{     filter:fliph;   /*水平翻转*/ }.flip3{     filter:flipv;   /*竖直翻转*/ }.flip3{     filter:flipv fliph;   /*水平竖直同时翻转*/ }

ログイン後にコピー

2. フィルターアプリケーション

見たことがあるはずです水の反射、とても美しいので、今日はこのフィルターを使用して水フィルターを実装します

<html><head><title>三个滤镜同时使用</title><style><!--body{	margin:12px;	background:#000000;}.three{	filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);	/* 同时使用三个滤镜 */	/* 竖直翻转、透明、波浪效果 */}--></style>   </head><body>	<img src="lotus.jpg"><br>	<img src="lotus.jpg" class="three"></body></html>

ログイン後にコピー

あまり美しく見えませんが、いくつかの簡単な属性だけを実現できます Photoshop の機能は、状況に応じて変更することもできます私たちの要件に合わせて。

3. まとめ