Vlad Merzhevich
要素の半透明性の効果は背景画像にはっきりと表示され、スタイリッシュで美しく見えるため、さまざまなオペレーティングシステムで広く使用されています。 Webデザインでは、不透明度プロパティ、または背景に設定されているRGBAカラー形式によって半透明性も適用および実現されます。
グラデーションブロック
図に示すブロックを作成します。 1.ブロックには、見出しの下にグラデーションの背景と小さなポインターが付いた半透明のグラデーションフレームが含まれています。 ページの背景は、半透明効果を明確にするためにのみ表示されています。独自の画像を指定できます。 最小ブロック高さは100pxです。
レイヤーを半透明にするにはどうすればよいですか？
要素の不透明度を変更するには、0から1までの値でopacity styleプロパティを使用します。ここで、0は完全な透明度に対応し、1は逆にオブジェクトの不透明度に対応します。 このプロパティはInternetExplorerでは機能しないため、CSS仕様の一部ではないプロパティであるフィルターを特別に使用する必要があります。 例1は、すべてのブラウザーにレイヤーの透明度を設定する方法を示しています。
半透明の背景
Vlad Merzhevich
部分的な透明度は、正しく使用すると、Webサイトのデザインで非常に印象的です。 主なことは、半透明のブロックの下には単色のパターンではなく、画像、この場合は透明度が目立つようになるということです。 この効果はさまざまな方法で実現されます。昔ながらの方法を含め、すべてを覚えている場合は、背景としてPNG画像を使用し、市松模様の画像と不透明度プロパティを作成します。 しかし、ブロック内に半透明の背景を作成する必要が生じるとすぐに、これらの方法には不快な欠点があります。 何が問題になっているのかが明確になるように、また半透明効果を作成するための型破りなオプションに慣れていない読者のために、簡単な概要を説明します。
テーブルを半透明に設定するにはどうすればよいですか？ただし、一部のセルは半透明ではありませんか？
CSS3で要素の透明度を変更するために、不透明度プロパティが提供されます。その値は0から1まで変化します。ゼロは要素の完全な透明度に対応し、1は逆に不透明度に対応します。 Internet Explorerブラウザーを除いて、最近のブラウザーはこのプロパティで非常に正しく機能するため、アルファ値（Opacity = X）を持つ特別なフィルタープロパティを使用する必要があります。Xは0から100まで変化します。
このレッスンでは、そのようなものを分析します CSSプロパティ - 不透明度と RGBA..。 財産 不透明度要素の透明性と機能にのみ責任があります RGBA-アルファチャネルの透明度の値を指定した場合、色と透明度。
CSSの不透明度
の数値 不透明度 0.0から1.0の範囲で指定されます。ここで、0は完全な透明度であり、1は逆に絶対不透明度です。 たとえば、50％の透明度を表示するには、値を0.5に設定する必要があります。 それは心に留めておく必要があります 不透明度親のすべての子に拡張されます。 これは、半透明の背景のテキストも半透明になることを意味します。 そして、これはすでに非常に重大な欠点であり、テキストはそれほど目立たない。
CSS不透明度による透明性
スクリーンショットでは、黒いテキストが青い背景と同じ半透明になっていることがはっきりとわかります。
Div（
背景：url（images / yourimage.jpg）; / *背景画像* /
幅：750px;
高さ：100px;
マージン：自動;
}
。青 （
背景：＃027av4; / *半透明の背景色* /
不透明度：0.3; / *背景の半透明度の値* /
高さ：70px;
}
h1（
パディング：6px;
font-family：Arial Black;
font-weight：太字;
フォントサイズ：50px;
}
RGBA形式のCSS透明度
色を記録するためのフォーマット RGBA、プロパティのより現代的な代替手段です 不透明度. R（赤）、G（緑）、B（青）-意味：赤、緑、青。 最後の手紙 NS-透明度を設定するアルファチャネルを意味します。 RGBAようではない 不透明度子供には影響しません。
次に、を使用した例を見てみましょう。 RGBA..。 これらの行をスタイルに置き換えてみましょう。
背景：## 027av4; / *背景色* /
不透明度：0.3; / *背景の半透明度の値* /
次の1行に
背景：rgba（2、127、212、0.3）;
ご覧のとおり、透明度の値0.3は両方の方法で同じです。
RGBAを使用した例の結果：
2番目のスクリーンショットは、最初のスクリーンショットよりもはるかに見栄えがします。
ブロックの背景の半透明で遊ぶことで、サイトに興味深い効果をもたらすことができます。 これらの半透明のブロックが、写真などの多彩なデザインを超えることが重要です。 この場合にのみ、効果が顕著になります。 この技術は、登場する前から、デザインで長い間使用されてきました。 CSS3、それは純粋にグラフィックプログラムに実装されました。
お客様が古いバージョンのブラウザで見栄えのするレイアウトを必要としている場合 インターネットエクスプローラ次にプロパティを追加します フィルターコードの有効性に影響を与えないように、コメントアウトすることを忘れないでください。
結論
フォーマット RGBAを除くすべての最新のブラウザでサポートされています インターネットエクスプローラ..。 それはまた非常に重要です RGBA柔軟性があり、特定の指定された要素にのみ作用し、子には影響しません。 これがレイアウト設計者にとってより便利であることは明らかです。 私の選択は明らかにフォーマットを支持しています RGBA受け取る CSSの透明性.
材料のより良い統合とより明確にするために、私はあなたが通過することを提案します。
不透明度CSSプロパティは、htmlの要素（画像、テキスト、ブロック）の透明度を担当します。
CSS不透明度構文
値が0.0から1.0の範囲の実際の値を取ることができる場合。 値1.0は、透明度がないことを意味します（デフォルト）。
例1。 HTMLの透明な画像
最初の画像は透明度なしで表示され、2番目の画像は透明度0.5で表示されます
要素の半透明性
ホバー時に画像を半透明にします！
DemoDownloadソースご清聴ありがとうございました！
次の記事
スクロールするdivブロックを作成するにはどうすればよいですか？HTMLとCSSで透明な背景を作成する（不透明度とRGBA効果）
半透明効果要素は背景画像にはっきりと表示され、スタイリッシュで美しく見えるため、さまざまなオペレーティングシステムで普及しています。 主なものは、半透明のブロックの下に単色のパターンを持たないことですが、画像、この場合、透明度が目立つようになります。
この効果は、PNG画像を背景として使用する、市松模様の画像を作成する、不透明度プロパティなどの昔ながらの手法など、さまざまな方法で実現されます。 しかし、ブロック内に半透明の背景を作成する必要が生じるとすぐに、これらの方法には不快な欠点があります。
テキストと背景の半透明性を考慮してください-ウェブサイトのデザインでそれを正しく使用する方法：
このプロパティの主な機能は、透明度の値が背景だけでなく、内部のすべての子に影響を与えることです。 これは、背景とテキストの両方が半透明になることを意味します。 不透明度コマンドを0.1から1に変更すると、透明度レベルを上げることができます。
HTML 5 CSS 3 IE 9
不透明度 インターネット上でのサイトの作成と宣伝Webデザインでは、部分的な透明度も適用され、要素の背景にのみ設定されるRGBAカラー形式によって実現されます。
通常、デザインでは、読みやすさを維持するために、要素の背景のみを半透明にし、テキストを不透明にする必要があります。 要素内のテキストも部分的に透明になるため、不透明度プロパティはここでは不適切です。 アルファチャネルが含まれるRGBA形式、つまり透明度の値を使用するのが最適です。 値はrgbaと記述され、赤、青、緑の色成分の値はコンマで区切られた括弧内にリストされます。 最後は透明度です。これは0から1に設定され、0は完全に透明で、1はrgba構文の不透明色です。
半透明の背景HTML5 CSS 3 IE 9
rgba インターネット上でのサイトの作成と宣伝。背景の不透明度は90％に設定されています-半透明の背景と不透明なテキスト。CSS3プロパティ 不透明度サイトの1つまたは別の要素を透過的にすることができます。
要素の透明度は、からの値によって決定されます 0 前 1 どこ 0 -完全に透明 1 -まったく不透明..したがって、たとえば、値 0.5 プロパティ 不透明度画像に適用すると、この画像は半透明である必要があります。
透明性
IEの透明性
InternetExplorerブラウザはプロパティをサポートしていません 不透明度ただし、9番目のバージョンまでは、透明度を設定できる独自のフィルターがあります。
フィルタ：アルファ（不透明度= 50）
意味 不透明度 InternetExplorerのブラウザフィルターは 0 -完全に透過的 100 -不透明
IEの透明性
ホバー時のこのメニューのブロックは、IEでも半透明になります!!
メイン
サイトの地図
象を買う
象を売る
象を雇う
プレフィックス。
これで原則として透明性の章は終わりですが、いわゆる透明性についてもっとお話ししたいと思います。 ベンダープレフィックス..これらの仲間はこの章と特別な関係はありませんが、CSS3を学ぶ過程で、彼らはますます頻繁に出くわし、どこかで彼らについて話す必要があります-それでここであなたに話します。
したがって、ベンダープレフィックスは、CSS仕様の正式な一部ではない実験的なプロパティのためにブラウザによって使用されるCSSプロパティへの特別なプレフィックスです。
CSS 3仕様はまだ開発中であり、正式にはこのチュートリアルで説明されているプロパティは実際には存在しませんが、ブラウザーはすでに危険とリスクを冒して積極的に使用しています。
なぜあなた自身の危険と危険にさらされているのですか？ はい。CSS3仕様が正式に承認された場合、そこに記載されているプロパティは、ブラウザですでに使用されている同じ名前のプロパティとは動作が異なる可能性があるためです。 さて、ここにブランドがあります。CSS3仕様の開発者がプロパティを指定するとしましょう。 不透明度ブロックの透明度としてではなく、たとえば、その陰影やちらつき（もちろん私はナンセンスを書いています）として、インストールされている何百万ものブラウザによって表示されます。 不透明度透明ですか！？
または、ブラウザ開発者が独自のプロパティを考え出したとしましょう。これは、他の誰もどこにも持っていない革新ですが、仕様にそのようなプロパティがないため、そのようなプロパティを持つドキュメントは検証チェックに合格しません。
これらの理由およびその他の理由により、ブラウザは、公式仕様の一部ではないプロパティの先頭にプレフィックスを使用します。 各ブラウザには、「-」記号で始まる独自のプレフィックスがあります。この記号はプロパティの先頭にあり、CSS 2.1仕様によると、この記号「_」は、プロパティが特定のCSS拡張機能用に予約されていることを意味します。ブラウザ。
最も人気のあるブラウザとそのプレフィックスは次のとおりです。
ブラウザ プレフィックス オペラ -o- Firefox、SeaMonkey、Camino -moz- Internet Explorer8以降 -MS- バージョン3までのSafari、Konqueror -khtml- Safari 3以降、Google Chrome -webkit- プレフィックスの使用は非常に簡単です。CSSプロパティを取得して、必要なプレフィックスをプロパティなどに置き換えるだけで十分です。 不透明度代わりの -moz-それが判明： -moz-不透明度
実は私の表現は「 プレフィックスを使用する"間違っている！ 実際、どこにも置き換えられるものはなく、プロパティがあるだけです 不透明度、 ある -moz-不透明度これらは同じことをする必要のない2つの異なるプロパティです!! -これは理解されるべきです..
また、特定のバージョンまでの特定の特定のブラウザーは、独自のプレフィックスでのみCSSプロパティをサポートできることも理解しておく必要があります（繰り返しますが、私は自分のプロパティを誤って表現しています-ブラウザーCSS拡張機能）。 -この教科書では、それぞれの特定のケースを個別に検討します。
透明性に関するこの章については、Firefox3.5以前は独自のプロパティを使用していることに注意してください。 -moz-不透明度、およびバージョン1.1より前のSafariブラウザはそのプロパティを使用します -khtml-不透明度 .
したがって、この例を完全にクロスブラウザーにするために、コードにさらに数行追加する必要があります。
プレフィックスと透明性
ご覧のとおり、プレフィックスはコードを大幅に拡張し、プレフィックスのみを使用して特定のプロパティを操作するバージョンのブラウザが、プロパティの場合のように十分に古い場合、プレフィックスの使用が常に正当化されるとは限りません。 不透明度、その後、それらを指定することはできません..-もちろんこれは悪いアドバイスですが..
さて、今いくつかの有用なヒントのために..
使用するプロパティがサイトのパフォーマンス、読みやすさ、使いやすさに大きな影響を与える可能性がある場合は、常にプレフィックスを使用してください（もちろん、特定のブラウザではプレフィックスなしでは実行できません）。 それは、サイトのデザインのいくつかの小さなことが機能しない場合と、たとえば、サイトメニューが機能しない場合や、サイトのテキストを読むことができない場合など、まったく異なる場合です。ブラウザは一部のプロパティをサポートしておらず、代わりに独自の同様のプロパティを使用しています。
