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

背景の不透明度は90％に設定されています-半透明の背景と不透明なテキスト。

不透明度CSSプロパティは、ページ要素の不透明度を制御するために使用されます。 仕様により、これはすべてのノードタイプに適用され、最新のすべてのブラウザでサポートされています。 その助けを借りて、興味深いデザインを作成したり、ユーザーとの便利なインタラクティブな対話を実装したりできます。

可能な値

cssのopacityプロパティの構文は次のようになります。

セレクター（不透明度：1;）セレクター（不透明度：0;）セレクター（不透明度：0.4;）

0から1の範囲の数値が入力として受け入れられます。パラメーターは1の小数にすることができますが、ピリオドはCSSの整数部分と小数部分の区切り文字として使用されます。

透明度がゼロの要素は非表示になりますが、それでもページ上でその位置を維持し、ユーザーと対話する機能を保持します。

プロパティ値がゼロと異なる場合、実際の透明度は上限のパーセンテージとして計算されます。 通常、不透明度：1は、要素の完全な不透明度を決定します。

子ノードの透明性

ただし、要素に透明度が異なる親がある場合、計算は変更されます。 子孫は、その祖先のいずれよりも「透明性が低い」ことはできません。 親ブロックの不透明度の値は、子の不透明度の上限になります。

親（不透明度：0.7;）子（不透明度：1;）

この状況では、不透明度が1に設定されていても、子要素は30％透明になります。

使用例

例1.半透明。 ブロックのメインの背景がターゲット要素の下に表示されている必要があります。

ターゲット（背景：黒;不透明度：0.5;）

ターゲットブロックの背景だけでなく、テキストも半透明になります。

例2.動的透明度制御。 ターゲットブロックにカーソルを合わせると、ターゲットブロックのCSS不透明度プロパティの値が変わります。

ターゲット（不透明度：0.2;）。target：ホバー（不透明度：1;）

動的透明性

最後の例は、透過要素がホバーなどのページイベントに応答し続けることを示しています。 これにより、JavaScriptを使用してCSSの不透明度プロパティを制御したり、遷移およびアニメーションメカニズムを使用して表示モードをスムーズに変更したりできます。

スクリプトから透過性にアクセスするには、特定の要素のスタイルオブジェクトを参照する必要があります。

//現在の不透明度を取得しますvaropacity = element.style.opacity; //新しい値を設定element.style.opacity = 0.4;

ブロックのフェードアウトは、遷移CSSプロパティを使用して実装できます。

要素（不透明度：0.1;遷移：不透明度1000ms;）要素：ホバー（不透明度：0.8;遷移：不透明度2000ms;）

これで、要素ノードは1秒以内にマウスホバーで不透明度を10％から80％に変更し、カーソルが離れると2秒以内に元の値にフェードします。

不透明度CSSプロパティを遷移メカニズムと組み合わせると、美しい効果を作成できます。

不透明度の代わりにアルファチャネル

CSSの不透明度メカニズムの主な微妙な点：

• その効果は、ブロックの背景だけでなく、テキストコンテンツにも拡張されます。これは、ブロックを明確にしておくことが望ましいです。
• 子要素は、親要素よりも透明度を低くすることはできません。

これらの効果によってレイアウトデザイナーの生活が困難になる場合は、不透明度ではなく、透明な背景を使用して、その値をRGBAまたはHSLA形式で指定する必要があります。

CSSの透明性は最近かなり流行のテクニックであり、クロスブラウザーの実装に問題を引き起こしています。 これまで、すべてのブラウザに透過性を実装するための万能の方法はありません。 しかし最近、状況は著しく改善しました。

この記事では、既存のアプローチについて詳しく説明し、最小限の労力ですべてのブラウザーで同じ結果を達成するのに役立つコード例と説明を提供します。

言及する価値のあるもう1つのポイントは、透明性は数年前から存在していますが、CSS標準の一部ではなかったことです。 これは非標準のプロパティであり、CSS3仕様の一部である必要があります。

古いアプローチ

FirefoxとSafariの古いバージョンでは、次のようなプロパティを適用する必要があります。

#myElement（-khtml-不透明度：.5; -moz-不透明度：0.5;）

-khtml-opacityプロパティは、古いバージョンのWebkitブラウザーで使用されていました。 このプロパティは非推奨であり、サイトのトラフィックの大部分がSafari 1.xを使用している訪問者からのものであることが確実でない限り、不要になりました。これはもちろんありそうもないことです。

次の行では、Mozillaエンジンの非常に初期のバージョンで機能した-moz-opacityプロパティを使用しています。 Firefoxはバージョン0.9でサポートを終了しました。

Firefox、Safari、Chrome、OperaでのCSSの透過性

最近のほとんどのブラウザでは、次のプロパティで十分です。

#myElement（不透明度：.7;）

上記の例では、要素は70％（30％の不透明度）の不透明度値に設定されています。 つまり、値を1に設定すると、要素は不透明になり、したがって、この値を0に設定すると、要素は非表示になります。

不透明度プロパティは、小数点以下2桁を処理します。 つまり、値「.01」は値「.02」とは異なりますが、あまり目立ちません。

InternetExplorerのCSS透過性

いつものように、InternetExplorerは他のブラウザと友好的な関係にありません。 さらに、現在、このブラウザの3つのバージョンがかなり広く使用されています。それぞれの透明度の設定は異なり、肯定的な結果を得るには追加の作業が必要になる場合があります。

#myElement（フィルター：アルファ（不透明度= 40）;）

この例では、バージョン6〜8で機能するfilterプロパティを使用していますが、バージョン6および7には1つの制限があります。要素のhasLayoutプロパティをtrueに設定する必要があります。 このプロパティはIEにのみ存在し、Habréなどで詳細を読むことができます。

IE8でCSSを使用して透明度を設定する別の方法は、次のアプローチを使用することです（コメントに注意してください）。

#myElement（filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 40）; / * IE6、IE7、IE8で動作します* / -ms-filter： "progid：DXImageTransform.Microsoft.Alpha（opacity = 40）"; / * IE8のみ* /）

最初の行は現在使用されているすべてのバージョンで機能し、2番目の行はIE8でのみ機能します。 2行目では-ms-プレフィックスが使用されており、値は引用符で囲まれていることに注意してください。

JavaScriptまたはjQueryを使用したCSS透過性の設定と変更

次のコードを使用して、透明度を設定できます。

Document.getElementById（ "myElement"）。Style.opacity = ".4"; //ほとんどのブラウザの場合document.getElementById（ "myElement"）。style.filter = "alpha（opacity = 40）"; // IEの場合

もちろん、この場合、jQueryを使用する方がはるかに簡単です。さらに、すべてのブラウザーで機能します。

$（ "＃myElement"）。css（（不透明度：.4））; //すべてのブラウザで動作します

このプロパティをアニメーション化できます。

$（ "＃myElement"）。animate（（opacity：.4）、1000、function（）（//アニメーションが完了しました。このコードはすべてのブラウザで機能します。））;

RGBA関数

rgba関数を使用してCSS3のアルファチャネルをサポートする予定です。 この機能は、Firefox 3以降、Opera 10.1以降、Chrome 2以降、Safari3.1以降で機能します。 これは次のように使用されます。

#rgba（背景：rgba（98、135、167、.4）;）

この場合、最後のパラメータは不透明度レベルを示します。

HSLA機能

前の関数と同様に、CSS3では、HSLA関数を使用して半透明の色を設定することもできます。この関数のパラメーターは、色相、彩度、明るさ、およびアルファチャネル（アルファ）です。

#hsla（背景：hsla（207、38％、47％、. 4）;）

rgba関数とhsla関数を使用する場合の重要な点は、不透明度プロパティが継承されている間は、不透明度設定が子要素に適用されないことです。

不透明度CSSプロパティは、htmlの要素（画像、テキスト、ブロック）の透明度を担当します。

CSS不透明度構文

値が0.0から1.0の範囲の実際の値を取ることができる場合。 値1.0は、透明度がないことを意味します（デフォルト）。

例1。 HTMLの透明な画像

最初の画像は透明度なしで表示され、2番目の画像は透明度0.5で表示されます

要素の半透明性

ホバー時に画像を半透明にします！

DemoDownloadソース

ご清聴ありがとうございました！

次の記事
スクロールするdivブロックを作成するにはどうすればよいですか？

orem Ipsumは、印刷および植字業界の単なるダミーテキストです。 Lorem Ipsumは、未知のプリンターがタイプのギャレーを取り、それをスクランブルしてタイプの見本帳を作成した1500年代以来、業界の標準的なダミーテキストでした。5世紀だけでなく、電子植字への飛躍も生き延びてきました。 1960年代に、Lorem Ipsumのパッセージを含むLetrasetシートがリリースされ、最近では、LoremIpsumのバージョンを含むAldusPageMakerなどのデスクトップパブリッシングソフトウェアで普及しました。
読者がそのレイアウトを見たときにページの読みやすいコンテンツに気を取られることは、長い間確立された事実です。 Lorem Ipsumを使用するポイントは、「ここにコンテンツ、ここにコンテンツ」を使用するのとは対照的に、文字の正規分布が多かれ少なかれ、読みやすい英語のように見えることです。 多くのデスクトップパブリッシングパッケージとWebページエディタは現在、デフォルトのモデルテキストとしてLorem Ipsumを使用しており、「lorem ipsum」を検索すると、まだ初期段階にある多くのWebサイトが見つかります。 何年にもわたって、時には偶然に、時には故意に（ユーモアを注入するなど）、さまざまなバージョンが進化してきました。

それで、今日は話します HTMLの透明性ページ。 フォトギャラリーや人気のあるWebサイトのログインフォームなど、透明なポップアップブロックに出くわしたことがあるでしょう。 HTMLの透明性には多くの用途があります。 では、それはどのように行われ、どこで使用できるのでしょうか。

さて、最初に、私たちのドキュメントには1つのモニター平面があるだけでなく、記事「Z-index」で述べたように、一般的には3次元であることを理解しましょう。 したがって、完全に透明なレイヤーでさえ、それがディスプレイスタックの一番上に表示される場合、残りの要素へのアクセスをブロックします。 これは、透明なボックスの主な用途の1つです。 通常はシェーディング効果が使用されますが、完全に透明なレイヤーも同じように機能します。 そのため、たとえば、多くの人気のあるフォトギャラリーが機能し、写真が表示されるシェーディングレイヤーが編成され、それらを制御します。 ページの残りの部分は（半）透明なレイヤーで「覆われ」、ページ上の他のすべての要素へのアクセスをブロックします。 それらの。 リンクをクリックしてページを離れることはできません。すべてのテキストは下敷きで覆われています。 サイトの本体に戻るために、彼らは通常、ギャラリー、ログインフォームなどを閉じるためのコントロールを提供します。 javascriptを使用して透明なブロックの表示/非表示を制御します。 ここでは、残念ながら、それに代わるものはありません。 これを使用しないと、ユーザーは透明なブロックをまったく表示しないか、現在のページを離れずに閉じることができなくなります。 これには、可視性または表示プロパティが使用されることに注意してください。

では、透明性は実際にhtmlでどのように編成されているのでしょうか。 要素の透明度の設定は通常CSS仕様に含まれていないため、一度に複数の命令を使用して作成する必要があります。 一部のブラウザ（つまり）は1つのオプションで動作し、他のブラウザは別のオプションで動作します。 つまり、組み込みのフィルター機能を使用し、他のブラウザーは、0（完全に透明なオブジェクト）から1（完全に不透明）の範囲の「不透明度」プロパティを使用します。 たとえば、透明度が30％の場合は、「 不透明度：0.30; フィルタ：アルファ（不透明度= 30）;"。例からわかるように、プロパティは似ています。最初のケースでのみ、0から1までの数値が使用され、2番目のケースではパーセンテージエントリが使用されます。このようなブロックの例：

<divスタイル= "位置：絶対;上：0;左：0;背景色：rgb（18、114、214）;幅：100％; id = "VideoFrame">

この例では、ビデオのサムネイルをクリックするとアクティブになるビデオ表示ブロックを使用しています。 ブロックは画面サイズやページの内容によって異なる可能性があるため、高さは指定されていません。 これに関連して、ビデオが開かれたときに動的に計算されます。 この手法の使用例は、私がかつて作業したruscircus.ruサイトのメインページにあります。

これがhtmlの透明性の秘訣です。 透明効果を得るために、z-indexと不透明度を使用しています。 そして、あなたはこれのための多くのアプリケーションを見つけることができます-ここのすべてはあなたの想像力によってのみ制限されます。

08.02.2013 コメントで尋ねられた質問、すなわち、透明なブロック上に不透明なブロックを作成する方法に答えます。 ここではすべてが単純です。z-indexに関する資料へのリンクを資料に示したのは無意味ではありません。透明なブロックよりも大きいz-indexを持つ別のブロックを作成する必要があります。 さて、数分で、私は例をスケッチしました。 ブロック：

<divスタイル= "位置：絶対;上：0;左：0;背景色：rgb（18、114、214）;幅：100％;高さ：100％; 不透明度：0.30; フィルタ：アルファ（不透明度= 30）; 可視性：非表示; z-index：1; " id = "VideoFrame"> <div id = "VideoFrame2" style = "位置：絶対;上：25％;左：25％;背景色：白;幅：50％;高さ：50％; 不透明度：0.99; フィルタ：アルファ（不透明度= 99）; 可視性：非表示; z-index：2; " onclick = "javascript：HideForm（）;" >>ここにテキストを書きます</ div>

そしてjavascript関数

< script type= "text/javascript" >function ShowForm（）（document.getElementById（ "VideoFrame"）。style .visibility = "visible"; document.getElementById（ "VideoFrame2"）。style .visibility = "visible";）function HideForm（）（document.getElementById（ " VideoFrame "）.style .visibility =" hidden "; document.getElementById（" VideoFrame2 "）.style .visibility =" hidden ";）

最初の関数は、透明なブロックを（不透明なテキストブロックとともに）表示します。ボタンにアタッチできます。 リンクなど。私が持っている2番目の関数は、テキストのあるブロックをマウスでクリックすることに関連しています。透明なブロックを非表示にします。

うまくいけば、それがどのように機能するかを明らかにしました。 そうでない場合は、質問してください。