CSS の可視性 - クロスブラウザー ソリューション - 3.8 のうち 5 に基づいて 6 票

側面のさまざまな要素を可視化し、完全なクロスブラウザー互換性にアクセスする方法を知っているため、さまざまなブラウザーで同じロボット効果が得られるように、あらゆる方法で CSS の透過性を確認できます。

要素の透明度を設定する方法

CSS3 には、透明な要素を作成するための不透明度の力があるため、任意の要素に zastosovuvat を適用できます。 で 与えられた力є 値は 0 から 1 までで、透明度のステップのサインです。 De 0 - tse povna 透明度 (すべての要素をロックするため)、および 1 povna 不透明度。 値は分数で書かれています: 0.1, 0.2, 0.3 ジャスト.

ヴィコリスタンの例:

クロスブラウザーの透過性

すべてのブラウザーが、より高い不透明度の同じ実装を受け入れるわけではありません。 場合によっては、別の名前のパワーまたはフィルターを獲得する必要があります。

Power CSS3 不透明度 Mozilla ブラウザ 1.7 以降、Firefox 0.9 以降、Safari 1.2 以降、Opera 9 以降。

とても良い:)ブラウザヤク インターネットエクスプローラバージョン 9.0 までは、不透明度のパワーと透明度の作成が考慮されていません。このブラウザでは、フィルターのパワーとアルファ (不透明度 = X) の値を獲得する必要があります。X は、 0 から 100 の範囲で、透明度の値が割り当てられます。 0 は完全な透明度、100 は完全な不透明度です。

コストは何ですか Firefox ブラウザバージョン 3.5 までは win power -moz-opacity opacity を置き換えます。

KHTML エンジンに触発された Safari 1.1 や Konqueror 3.1 などのそのようなブラウザは、スキャンに透過不透明度 -khtml-opacity を使用します。

すべてのブラウザーで同じように見えるように、CSS の透過性をどのように設定しますか? 要素の透過性のためのクロスブラウザー ソリューションを作成するには、1 つの不透明度だけでなく、次の一連の累乗を規定する必要があります。

フィルター: アルファ (不透明度 = 50); /* IE の不透明度 */ -moz-opacity: 0.5; /* Mozilla 3.5 以下のサムネイル */ -khtml-opacity: 0.5; /* Konqueror 3.1 および Safari 1.1 トリム */ opacity: 0.5; /* ブラウザの問題解決に役立つ */

さまざまな要素の透明性

でやきを見てみましょう、洞察のタスクを適用します 歌う要素、ほとんどの場合、側面が振動します。

CSS 画像の明瞭さ。

半透明の赤ちゃんを作成するためのオプションを見てみましょう。 1枚目の攻撃尻は透明度なし、もう1枚は透明度50%、3枚目は透明度30%。

結果：

画像の上にカーソルを置いたときの CSS の可視性。

多くの場合、画像を見る必要があります。そうしないと、カーソルがその上に置かれている場合、その時点で他の要素が存在する可能性があります。 可能性のあるZrobiti tse ヘルプ CSS疑似クラス: ホバー。 どの写真について、2 つのクラスを規定する必要があります。カーソルの上。

デモで結果を確認できます。

CSSで背景をクリア。

ここで、要素のすべての寄与で透明度が拡大していることを覚えておく必要があります。悪臭は、要素のより低い寄与の透明度を大きくすることはできません。

お尻のように、追加の写真用の側面の背景を持つオプションと、追加の色と 50% の透明度用の背景を持つブロックを作成します。

コード例:

配置されたコードの結果への軸:

orem Ipsum は、単にダミーのテキスト印刷および植字業界です。 Lorem Ipsum は 1500 年代以来、業界標準のダミー テキストであり、未知の印刷業者が活字のギャレーをスクランブルして活字見本帳を作成し、最近では Lorem Ipsum のバージョンを含む Aldus PageMaker のようなデスクトップ パブリッシング ソフトウェアを使用しています。
これは、ページのレイアウトを見るときに、ページの読み取り可能なコンテンツに注意する必要があるという良い事実です。 Lorem Ipsum の勝利の証は、多かれ少なかれ大規模なプロモーションを勝ち取ることができる人なので、「Press here, content here」を勝ち取ることができ、読みやすい英語のように見えます。 Lorem Ipsum を欠陥のあるテキストとしてランク付けし、「lorem ipsum」を検索する多くの作業パッケージおよび Web ページの Web ページは、初期段階にある多くの Web サイトを検索します。 さまざまなバージョンが何年にもわたって進化してきた可能性があり、偶然の場合もあれば、意図的に (ユーモアを注入するなど) ある場合もあります。

オッツェ、今日のモバピデについて html の透明度側面。 フォトギャラリーであろうと、人気のあるサイトでの承認の形であろうと、あなたは透明なマージブロックと一緒に歌いました. htmlのZastosuvannya prozorostіは、非個人的であることを知ることができます。 では、どうすれば戦うことができ、de її が勝つことができるのでしょうか?

さて、まず第一に、私たちが持っているドキュメントはモニターの 1 つの平坦な領域だけではないことがわかります。記事「Z-index」で推測した 3 つの世界のように見えます。 Vidpovidno navit zovsim prozory ボールは、発酵スタックの上部に寄りかかり、他の要素へのアクセスをブロックします。 メインのzastosuvan prozorikhブロックをすべて持っているのは誰ですか。 勝ったように聞こえるものに関係なく、シェーディングの効果が観察され、同じようにプロゾリーボールの練習を繰り返します。 たとえば、人気のある写真ギャラリーがたくさんあり、写真が表示されるシェーディング ボールとそれらを管理する要素が整理されています。 ページの側面にある他のすべての要素は、側面にある他のすべての要素へのアクセスを閉じるボールで「閉じた」(単一の) ように見えます。 トブト。 側面の5つは、ヤケを押しても力が出ませんでした-テキスト全体が裏地で閉じられていました。 サイトの本体に戻るには、コントロール要素を鳴らしてギャラリーを閉じ、入り口を形成します。 追加の JavaScript 用の透過ブロックを表示/アタッチします。 ここで、残念ながら妖夢に代わるものはありません。 yogo vikoristannya koristuvach がなければ、あなたは強打することはできません 透明ブロックそうしないと、流れ側を埋めずに閉じることができません。 力の可視性や表示の目的でどちらが勝つかを指定します。

では、透過性は html でどのように構成されているのでしょうか? 要素の明快さを改善することは CSS の仕様には含まれていないため、その作成には散りばめられた指示を勝ち取る必要があります。 あるオプションで動作するブラウザもあれば、別のオプションで動作するブラウザもあります。 つまり、vikoristovu vbudovanuyu フィルター機能、および他のブラウザー vikorivuyu パワー「不透明度」は、間隔 0 (透明すぎるオブジェクト) から 1 (不透明すぎる) に設定されています。 例えば透明度30%で一見すると、「 不透明度:0.30; フィルター: アルファ (不透明度 = 30);お尻からわかるように、強力さは似ています-最初のケースでのみ0から1までの勝利があり、他のケースには記録があります。 そのようなブロックの例:

お尻にはビデオを表示するブロックがあり、ビデオ クリップのサムネイル上でクマが押されるとアクティブになります。 ブロックの高さは設定されていません。 チンウォンに関連して、ビデオの再生時に動的に計算されます。 vikoristannyatsієїtekhnikiのお尻は、サイトruscircus.ruのメインページで見つけることができます。

Axis、vlasne、および html における透明性の全体の秘密。 z-index と opacity を使用して、透明効果を差し引きます。 それでも、顔のない誰かを知ることができます-ここでは、すべてがあなたの想像力だけに囲まれています.

08.02.2013 食べ物、コメントでのタスク、そして不透明な透明なブロックで育った人々について見てみましょう。 ここではすべてが単純です。Z インデックスについてマテリアルのマテリアルを求めたのは当然のことです。Z インデックスが大きく、透明なブロックよりも低いブロックをもう 1 つ作成する必要があります。 軸はすぐに、クビリンのスプラットのために、お尻を投げます。 ブロック:

私はjavascriptで機能します

最初の機能は透明なブロックを表示することです (テキストの不透明なブロックから一度に) - ボタンに取り付けることができます。 送信など.. テキスト付きのブロックでクマをクリックすることに関連付けた別の機能 - クリアブロックがあります。

私は働いている人たちに明確さをもたらすことができます。 そうでない場合は、食べ物を入れてください。

HTML と CSS で透明な背景を作成する (実質的に不透明度と RGBA)

飲み物の透明度の効果背景の小さな要素をよく覚えて、さまざまなオペレーティングシステムでそれを広げて、スタイリッシュで美しく見えるようにします。 酔わせるブロックの下の母親のスマットは、モノラルの赤ちゃんではなく、イメージであり、同じように透明性が記念になります。

このような効果は、スカムバッグ、マップされた画像、パワーオパシティなどの昔ながらの方法を含むさまざまな方法で実現できます。 そして、ブロックで作業する必要があることを少し非難するのと同じように、それは腐っているようで、これらの方法には容認できない裏側があります.

テキストと背景の透明度を見てみましょう - サイトのデザインで強調するのは正しいことです:

権威の力の主な特徴は、透明性の重要性がアブラムシだけでなく、中間のすべての娘要素にあるという事実にあります。 Tse は、背景とテキストが半透明になることを意味します。 opacity コマンドを 0.1 から 1 に変更すると、透明度を上げることができます。

HTML 5 CSS 3 IE 9

Web デザインでは、透明度も停滞していることが多く、要素の背景により適した RGBA カラー形式に達します。

デザインに響き、要素を見やすくしましょう。テキストは読みやすさを確保するために不透明です。 要素の中央にあるテキストもしばしば表示されるため、不透明度のパワーはここでは適していません。 RGBA 形式を使用することをお勧めします。この形式の一部はアルファ チャンネル、つまり透明度の値です。 意味がrgbaと書かれているので、テンプルで、色の赤、青、緑の要素の意味がやり直されます。 透明度は 0 から 1 に設定されているため、0 は完全な透明度を意味し、1 色の不透明度 - rgba 構文を意味します。

Napіvprozora tlo HTML 5 CSS 3 IE 9

CSS で透明効果を作成するには、不透明度の力を使用します。

ブラウザー IE8 およびそれ以前のバージョンは代替のパワーをサポートしています - filter:alpha(opacity=x) 。したがって、"x" は 0 から 100 までの値を受け入れることができます。値が小さいほど、要素がより明確になります。

他のすべてのブラウザーは標準の CSS 不透明度の力を尊重するため、0.0 から 1.0 のような値を受け入れることができ、値が小さいほど、要素の透明度が高くなります。

試す

ホバー時の透明度

Pseudo-class:hover を使用すると、マウスをホバーしたときに要素の外観を変更できます。 マウスをホバリングしたときに画像が鮮明さを失うように、可能性を高速化しています。

試す

背景の透明度

要素を作成するには 2 つの方法があります。前述の不透明度の力と、RGBA 形式で背景を着色する方法です。

RGB 形式のカラー モデルは既にご存知かもしれません。 RGB (赤、緑、青 - 赤、緑、青) は、赤、緑、青の色の混合方法を定義するカラー システムです。 たとえば、テキストに黄色を設定する場合、次のスタンのいずれかであるかどうかをスピードアップできます。

色: RGB(255,255,0); 色: RGB(100%,100%,0);

色、RGB を使用するタスクは、選択した 16 番目の値に従って考慮されます。これにより、透明度のアルファ チャネルを変更できます。 Tse は、アルファ透明度を持つ要素の背景が、その下にある要素から見えることを意味します。

あいまいな RGBA カラーは、標準の RGB ルールの構文に似ています。 ただし、それとは別に、RGBA 値 (RGB を置き換える) を指定し、色値の後に 0.0 (完全な透明度) から 1 (完全な不透明度) までのギャップに追加の 10 番目の透明度値を設定する必要があります。

色: rgba(255,255,0,0.5); 色: rgba(100%,100%,0,0.5);

不透明度と RGBA の力の違いは、要素全体が透明になるように、不透明度の力が要素全体に zastosovuyu 透明性を与えるという事実にあります。 また、RGBA を使用すると、要素の外側の部分 (たとえば、テキストまたは背景のみ) に透明度を設定できます。

Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70);/*IE8 以降のバージョンの場合*/ text-align: center; 1px solid black; font-weight: bold; text-align: center; ) 試す »

注: RGBA 値は、IE8 以前のブラウザーではサポートされていません。 古いブラウザ用にカラー フォールバックを行うには、アルファ チャネルでカラー値をトリミングしないようにするには、最初の RGBA 値に設定します: background: rgb(255,255,0); 背景: rgba(255,255,0,0.5);

/* 06.07.2006 */

CSS 透明度 (css 不透明度、javascript 不透明度)

透明性の効果がこの記事のテーマです。 HTML 側の要素を透明にする方法、CSS または Javascript の使用方法、および Firefox、Internet Explorer、Opera、Safari のブラウザーの改善によりブラウザー間の互換性 (異なるブラウザーで同じ作業) を達成する方法をどのように知っていますか? 、Konqueror、どういたしまして。 それまでは、JavaScript を使用して明快さを段階的に変更するソリューションを見てみましょう。

CSS 不透明度 (CSS 透明度)

CSS 不透明度の共生

共生の下では、1 つの CSS ルールでさまざまなブラウザーのさまざまなスタイルを組み合わせて、必要な効果を削除したい場合があります。 ブラウザ間の互換性を実装するため。

Filter:progid:DXImageTransform.Microsoft.Alpha(不透明度=50); /* IE 5.5+*/ -moz-不透明度: 0.5; /* Mozilla 1.6 以下 */ -khtml-opacity: 0.5; /* Konqueror 3.1、Safari 1.1 *//* CSS3 - Mozilla 1.7b 以降、Firefox 0.9 以降、Safari 1.2 以降、Opera 9*/

実際、IE5.5+ およびブラウザでは、CSS3 の不透明度を理解するために最初と最後のルールが必要であり、真ん中の 2 つのルールは明らかに敬遠しませんが、尊重さえしません (それはあなた次第です。あなたは悪臭を放つ必要があります）。

Javascript 不透明度の共生

これで、上記のさまざまなブラウザーの機能を修正して、スクリプトを使用して透過性をインストールすることができます。

関数 setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // それでも要素を使用して ID を割り当てないでください。そうしないと、ブラウザは可視性をクリアする方法のネイティブ関数をサポートしません if (opacityProp=="filter") // Internet Exploder 5.5+ (nOpacity *= 100; // 透過性が既に設定されている場合は、filters コレクションを介して変更できます。それ以外の場合は、style.filter を介して透過性を追加できます var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // 他のフィルターを上書きしないようにするために、"+="） そうしないと // その他のブラウザ elem.style=nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 準拠 (Moz 1.7 以降、Safari 1.2 以降、Opera 9)「不透明度」を返します。 else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 以前、Firefox 0.8「MozOpacity」を返します。 else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1、Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; false を返します。 //透明度なし }

この関数は 2 つの引数を取ります: sElemId - 要素の ID、nOpacity - CSS3 opacity スタイルの透明度を設定する 0.0 から 1.0 までの音声番号。

IE の前にある setElementOpacity コードのいくつかを説明するのは良い考えだと思います。

VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

食べ物のせいにすることもできますが、引き寄せるパスで透過性をインストールしてみませんか (=) power elem.style.filter = "..."; ? パワー行フィルターの最後に追加する "+=" を獲得するにはどうすればよいですか? 答えは簡単で、他のフィルターを「上書き」しないようにするためです。 もしそうなら、そのようなランクに突然フィルターを追加すると、そのフィルターの値を以前に変更することはありませんが、パワーの行の最後に追加するだけであれば、それは正しくありません. そのためには、挿入前のフィルターとして、フィルターの要素 elem.filters への stash のコレクションを介して操作する必要があります (ただし、フィルターがまだ要素に割り当てられていないため、確認することはできません。指定されたコレクションを介して操作します)。 コレクションの要素へのアクセスは、フィルター名またはインデックスのいずれかで可能です。 ただし、フィルターは、短い IE4 スタイル、またはコードで説明されている IE5.5+ スタイルの 2 つのスタイルに設定できます。

要素の透明度の滑らかな変化

ソリューション準備完了。 勝利ライブラリ opacity.js

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/sweet_cherry.jpg" width="98" height="97" />

基本的なカット:

1. 関数のライブラリを接続します。
2. Viznazhemo ルール vikoristovyuchi メソッド fadeOpacity.addRule();
3. 方法をクリックする フェード不透明度()透明度を cob 値から end 値に変更する、または フェードオパシティ.バック()同等の明快さのコブ値に目を向けてください。

ロゾブエモ

ライブラリの接続方法は、お尻の方が見えるかな。 次のステップは、ルールの目的を説明することです。 最初のステップは、透明度をスムーズに変更する方法を変更することです。プロセスに使用されるルールを指定する必要があります。このバグは、透明度を変更するプロセスに速度を注入するフェード パラメータを示します。

ルールは追加のメソッドに割り当てられます fadeOpacity.addRule

構文： fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

引数:

• sRuleName - 十分に設定されているルールの名前。
• nStartOpacity および nFinishOpacity - cob および終了開口部、0.0 から 1.0 の範囲の数値。
• nDelay - ミリ秒単位の遅延 (neobov'yazkovy 引数、ロック用、30 まで)。

可視性フェーダー自体は、fadeOpacity(sElemId, sRuleName) メソッドを介して実行できます。ここで、sElemId は要素の ID であり、sRuleName はルールの名前です。 出口キャンプの可視性を回転させるために、fadeOpacity.back(sElemId) メソッドが切り替えられます。

:ホバーして可視性を簡単に変更

また、透過性の単純な変更 (段階的な変更ではない) には、疑似セレクター自体が適していることも示します。 :ホバー、これにより、新しいマウスにカーソルを合わせた瞬間に要素のスタイルを割り当てることができます。

画像がA要素の真ん中に配置されていることに注意してください. 右, バージョン6までのInternet Explorerでは:hover疑似セレクターが理解されます. それだけ 100% posilan であり、be-like 要素ではなく、CSS を使用するのが好きです (IE7 では位置が修正されています)。

IE の明瞭さとぎざぎざのテキスト

Windows XPの退出はメソッドによるスクリーンフォントのスムージングでした クリアタイプ、同時に平滑化方法を使用する場合の IE の副作用。 私たちの意見では、ClearType スムージング メソッドが有効になっている場合、テキストを含む要素の透明度がブロックされるため、テキストが正常に表示されなくなります (太字のテキスト - 大胆な、たとえば、2 倍にすると、さまざまなアーティファクトがそのように表示される可能性があります。 位置を修正するには、IEの場合は背景色、CSSの力を設定する必要があります 背景色、透明度が停滞している要素。 幸いなことに、IE7 ではバグが修正されました。