CSS を使用してテキストまたは画像に透明な背景を与えるにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/806000

  •  03-07-2019
  •  | 
  •  

質問

CSSのみを使用して、 background 要素は半透明ですが、要素のコンテンツ (テキストと画像) は不透明ですか?

テキストと背景を 2 つの別々の要素として持たずにこれを実現したいと考えています。

試すとき:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

子要素は親の不透明度の影響を受けるように見えるので、 opacity:1 と相対的なものです opacity:0.6 親の。

役に立ちましたか？

解決

半透明の PNG 画像を使用するか、CSS3を使用します：

background-color:rgba(255,0,0,0.5);

css3.infoの記事 不透明度、RGBA、および妥協 >（2007-06-03）。

<p style="background-color:rgba(255,0,0,0.5);">
  <span>Hello world</span>
</p>

他のヒント

Firefox 3およびSafari 3では、 Georg Sch <！>＃246; lly言及。

少し知られているトリックは、インターネットでも使用できることです<！> nbsp; Explorerもグラデーションフィルターを使用します。

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

最初の16進数は、色のアルファ値を定義します。

すべてのブラウザの完全なソリューション：

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

これは RGBaおよびフィルターを介した、子要素に影響を与えないCSSの背景透明性 。

スクリーンショットの結果の証明：

これは、次のコードを使用する場合です。            

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8

これは、CSS 3を使用するのではなく、思いつく最高のソリューションです。そして、Firefox、Chrome、Internet Explorerで見た限りではうまく機能します。

コンテナDIVと2つの子DIVを同じレベルに入れます。1つはコンテンツ用、もう1つはバックグラウンド用です。 そして、CSSを使用して、コンテンツに合わせて背景のサイズを自動調整し、z-indexを使用して実際に背景を背面に配置します。

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

シンプルな半透明の背景色の場合は、上記のソリューション (CSS3 または背景画像) が最適なオプションです。ただし、もっと凝ったことをしたい場合 (例:アニメーション、複数の背景など)、または CSS3 に依存したくない場合は、「ペイン テクニック」を試すことができます。

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

この手法は、外側のペイン要素の内側に 2 つの「レイヤー」を使用することで機能します。

  • 1 つ (「背面」) は、コンテンツの流れに影響を与えずにペイン要素のサイズに適合します。
  • もう 1 つはコンテンツを含み、ペインのサイズの決定に役立ちます (「続き」)。

の position: relative ペイン上は重要です。バックレイヤーにペインのサイズに合わせるよう指示します。(必要な場合は、 <p> タグを絶対タグにするには、ペインを <p> に <span> それをすべて絶対位置でラップします <p> 鬼ごっこ。）

この手法が上記の同様の手法に比べて優れている主な利点は、ペインが指定されたサイズである必要がないことです。上でコード化したように、全幅 (通常のブロック要素レイアウト) に収まり、高さはコンテンツと同じになります。外側のペイン要素は、長方形である限り、任意のサイズに変更できます。インラインブロックは機能します。従来のインラインではそうではありません)。

また、背景の自由度も大幅に広がります。バック要素には自由に何を入れてもよく、コンテンツの流れに影響を与えません (複数のフルサイズのサブレイヤーが必要な場合は、位置も指定されていることを確認してください:絶対、幅/高さ:100%、および上/下/左/右:自動)。

背景のインセット調整 (上/下/左/右による) や背景の固定 (左/右または上/下のペアのいずれかの削除による) を可能にする 1 つのバリエーションは、代わりに次の CSS を使用することです。

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

書かれているように、これは Firefox、Safari、Chrome、IE8 以降、Opera で機能しますが、IE7 と IE6 では追加の CSS と式、IIRC が必要です。最後に確認したところ、2 番目の CSS バリエーションは Opera では機能しませんでした。

注意すべきこと:

  • cont レイヤー内の浮動要素は含まれません。それらが取り除かれているか、その他の方法で封じ込められていることを確認する必要があります。そうしないと、底から滑り落ちてしまいます。
  • マージンは pane 要素に配置され、パディングは cont 要素に配置されます。逆の方法 (コンテキストのマージンやペインのパディング) は使用しないでください。そうしないと、ページが常にブラウザ ウィンドウよりわずかに幅が広くなるなどの奇妙な現象が発生します。
  • 前述したように、全体がブロックまたはインラインブロックである必要があります。お気軽にご利用ください <div>の代わりに <span>s CSS を簡素化します。

より充実したデモ。 display: inline-block, 、そして両方とも auto ＆ 特定の widths/min-heights:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

そして、これが ライブデモ 広く使用されている技術の例:

christmas-card-2009.slippyd.com screenshot

半透明の.png を使用することをお勧めします。

Photoshop を開いて、2x2ピクセル画像（ピッキング1x1は、インターネットを引き起こす可能性があります<！> nbsp; Explorerのバグ！ ）、緑色で塗りつぶし、<！> quot; Layers tab <！> quot;で不透明度を設定します。 60％まで。次に、保存して背景画像にします。

<p style="background: url(green.png);">any text</p>

もちろん、素敵なインターネット<！> nbsp; Explorer <！> nbsp; 6 。より良い修正が利用可能ですが、ここに簡単なハックがあります：

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

マークアップを最小化するトリックがあります。背景として擬似要素を使用すると、メイン要素とその子に影響を与えずに不透明度を設定できます。

デモ

出力：

擬似要素を含む背景の不透明度

関連コード：

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

ブラウザのサポートは、インターネット<！> nbsp; Explorer <！> nbsp; 8 以降です。 。

最も簡単な方法は、半透明の背景 PNG画像を使用することです。

必要に応じてJavaScriptを使用してInternet Explorer 6で動作させることができます。

Internet Explorer 6での透過PNG 。

それ以外、

two side-by-side sibling elementsを使用して偽造できます-半透明にする、次にabsolutely position the other over the top？

この方法を使用すると、単色だけでなく背景に画像を配置でき、境界線などの他の属性を透明にするために使用できます。透明なPNG画像は必要ありません。

CSSで:before（または:after）を使用し、不透明度の値を指定して、要素を元の不透明度のままにします。したがって、：beforeを使用して、フェイク要素を作成し、必要な透明な背景（または境界線）を与え、z-indexで不透明にしたいコンテンツの背後に移動できます。

例（フィドル）（クラスDIVのdadは単なるコンテキストと色のコントラストを提供するために、この余分な要素は実際には必要ありません。赤い長方形は少し下に移動して右に移動し、fancyBg要素の背後に背景を表示します）：

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

このCSSを使用：

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

この場合、.fancyBg:beforeには透明度（この例では背景が赤ですが、画像または境界線にすることができます）に設定するCSSプロパティがあります。 .fancyBgの後ろに移動するために絶対位置に配置されます（ゼロの値または必要に応じてより適切な値を使用します）。

問題は、あなたの例ではテキストが実際に完全な不透明度を持っていることです。 pタグ内は完全に不透明ですが、<=>タグは半透明です。

CSSで実現する代わりに、半透明のPNG背景画像を追加するか、テキストとdivを2つの要素に分けて、テキストをボックス上に移動します（負のマージンなど）。

それ以外の場合は不可能です。

編集：

クリスが言ったように、透過性のあるPNGファイルを使用する場合は、JavaScriptの回避策を使用して、厄介なInternet Explorerで動作させる必要があります...

これらすべての答えは、デザイナーが単色の背景を望んでいることを前提としています。デザイナーが写真を背景として実際に望んでいる場合、現時点で唯一の本当の解決策はjQuery TransifyプラグインのようなJavaScriptです他の場所で言及。

する必要があるのは、CSSワーキンググループのディスカッションに参加して、それらにbackground-opacity属性を提供させることです！複数の背景機能と連携して動作するはずです。

これを行う方法は次のとおりです（最適ではないかもしれませんが、動作します）：

半透明にするdivを作成します。クラス/ IDを付けます。空のままにして、閉じます。高さと幅を設定します（300ピクセルx 300ピクセルなど）。 0.5または任意の不透明度と背景色を指定します。

次に、そのdivのすぐ下で、異なるクラス/ IDで別のdivを作成します。テキストを配置する段落をその中に作成します。 -295px位置：相対、トップ：<=>（295ピクセルの負の値）を指定します。適切な尺度のために2のz-indexを与え、不透明度が1であることを確認します。段落を好きなようにスタイルしますが、最初の<=>の寸法よりも小さく、オーバーフローしないようにします。 / p>

それだけです。コードは次のとおりです。

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

これはSafari 2.xで動作しますが、インターネットについては知りません<！> nbsp; Explorer。

すべてを処理するjQueryプラグイン、Transify（ Transify-要素に透明度/不透明度を簡単に適用するjQueryプラグイン<！>＃8217; s background ） 。

私は時々この問題に遭遇していたので、人生をもっと楽にする何かを書くことにしました。スクリプトは2 <！> nbsp; KB未満であり、動作させるのに必要なコードは1行のみで、必要に応じて背景の不透明度のアニメーションも処理します。

背景の不透明度、ただしテキストではない いくつかのアイデアがあります。半透明の画像を使用するか、追加の要素をオーバーレイします。

しばらく前に、このことについて CSSを使用したクロスブラウザバックグラウンドの透明性。

Internet Explorer 6では、背景を透明にし、その上にあるテキストを完全に不透明に保つことができます。他のブラウザでは、透明なPNGファイルを使用することをお勧めします。

あなたが Photoshop の場合は、次のものも使用できます。

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

または：

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

要素の背景を半透明にし、要素の内容（テキスト<！> amp; images）を不透明にするため。そのイメージのcssコードを記述する必要があり、不透明度と呼ばれる1つの属性を最小値で追加する必要があります。 例：

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

//値が小さいほど透明になり、値が小さいほど透明になります。

background-color：rgba（255,0,0,0.5）; 上記のように、単純に言えば最良の答えです。 2013年であってもCSS3を使用するのは簡単ではありません。なぜなら、さまざまなブラウザーからのサポートのレベルは、反復ごとに変わるからです。

background-colorはすべての主要なブラウザー（CSS3の新規ではない）でサポートされますが[1]、特にバージョン9より前のInternet Explorerおよびバージョン5.1より前のSafariの境界線では、アルファ透明度が扱いにくい場合があります。 [2]

コンパスまたは SASS は、本番環境とクロスプラットフォームの互換性を本当に支援します。

[1] W3Schools：CSS background-colorプロパティ

[2] ノーマンズブログ：ブラウザサポートチェックリストCSS3（2012年10月）

CSS3には、問題の簡単な解決策があります。使用：

background-color:rgba(0,255,0,0.5);

ここで、rgbaは赤、緑、青、アルファ値を表します。 255のために緑の値が取得され、半透明度は0.5のアルファ値によって取得されます。

少ないを使用している場合、fade(color, 30%)を使用できます。

インターネット<！> nbsp; Explorer <！> nbsp; 8 でこれを解決できます（ab）グラデーション構文を使用します。カラー形式はARGBです。 Sass プリプロセッサーを使用している場合、組み込み関数を使用して色を変換できます。 <！> quot; ie-hex-str（）<！> quot;。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

純粋な CSS <！> nbsp; 3 ：rgba(red, green, blue, alpha)を使用できます。ここで、alphaは必要な透明度のレベルです。 JavaScriptやjQueryは必要ありません。

例を次に示します。

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ？

同じdivの画像にオーバーレイを配置する簡単なソリューションがあります。このツールの正しい使用法ではありません。ただし、CSSを使用してオーバーレイを作成するのは魅力的です。

次のようなインセットシャドウを使用します。

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

これですべて：）

CSS で RGBA (red, green, blue, alpha)を使用できます。

それで、あなたのケースでうまくいくようにこのようなことをしてください：

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
  

次の例のようにを使用してrgba color codeを実行できます。

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

通常、このクラスを作業に使用します。かなり良い。

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

これを使用すると、不透明度付きの背景色を使用する最良の方法の観点から、テストカラーや境界線などの他の要素の不透明度は失われません。

background-color: rgba(71,158,0,0.8);

不透明度のある背景色を使用

background-color：rgba（R、G、B、Opacity）;

ここに画像の説明を入力してください

RGB（63,245,0）のようなこのカラーコードのような不透明度を持つRGBカラーを使用し、（63,245,0,0.5）のような不透明度を追加し、RGBAを置き換えてRGBを置き換えることもできます。不透明度の使用

div{
  background:rgba(63,245,0,0.5);
  }

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top