ホームページ > 記事 > ウェブフロントエンド > CSS の基本スキル - Filter_html/css_WEB-ITnose さん
CSS の基本スキル - Filter_html/css_WEB-ITnose さん
- WBOYオリジナル
- 2016-06-24 11:51:531247ブラウズ
博篇 前回のブログ全般の基本的な使い方、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. まとめ
もちろん、ID にフィルターを使用しますが、IE 以外のブラウザでは不透明度を使用し、その値は 0 から 1 の間です。具体的な記述方法はここにはありません。変更する必要があります。フィルター:アルファ(不透明度=60)から不透明度=0.6。このフィルターの機能は非常に強力ですが、PhotoShop が優れていないというわけではありません。Photoshop では画像をカスタマイズできます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。