透過 - 背景画像 html




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

CSSのみを使用して、要素のbackgroundを半透明にすることはでき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:1opacity:0.6相対的opacity:0.6親のopacity:0.6です。


以下の例のように、cssを使用して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>


CSS3はあなたの問題を簡単に解決します。 つかいます:

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

ここで、rgbaは赤、緑、青、アルファ値の略です。 255のために緑の値が得られ、0.5のアルファ値によって半透明が得られる。


RGB(63,245,0)のこのカラーコードのような不透明度のRGBカラーを使用し、(63,245,0,0.5)のような不透明度を追加し、RGBAをRGBを置き換えます。 不透明度の使用

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


Internet Explorer 8では、グラデーション構文を使用して(ab)を解決できます。 カラーフォーマットはARGBです。 Sassプリプロセッサを使用している場合、組み込み関数 "ie-hex-str()"を使用して色を変換することができます。

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


CSSRGBA (red, green, blue, alpha)を使うことができます:

だから、単にあなたの場合にうまくいくような何かをする:

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

span {
  color: white;
}

背景色:rgba(255,0,0,0.5); 上記のように単純に置かれた最高の答えです。 CSS3を使用すると言うと、2013年であっても、繰り返しごとにさまざまなブラウザからのサポートのレベルが変わるため、単純ではありません。

background-colorはすべての主要なブラウザ(CSS3の新機能ではありません)[1]でサポートされていますが、特にバージョン9より前のInternet Explorerやバージョン5.1より前のSafariのボーダーカラーでは、アルファ透明化が難しい場合があります。 [2]

コンパスSASSようなものを使うと、実際にプロダクションやプラットフォーム間の互換性を助けることができます。

[1] W3Schools:CSSの背景色のプロパティ

[2] ノーマンのブログ:ブラウザサポートのチェックリストCSS3(2012年10月)


あなたが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**
}

このメソッドを使用すると、単色だけでなく背景にイメージを置くことができ、境界線などの他の属性に透明性を持たせることができます。 透明なPNG画像は必要ありません。

CSSで:before :または:after使用し、不透明度の値を与えて要素を元の不透明度のままにします。 したがって、あなたは:を使うことができます:前に、偽の要素を作成し、透明な背景(またはボーダー)を与え、それをZ- z-index不透明にしたいコンテンツの後ろに移動しz-index

例( fiddle )(クラスのDIVは色に文脈とコントラストを提供することに過ぎないことに注意してください。この余分な要素は実際には必要ありません。赤い矩形は少し下に移動し、 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:beforeません)。 これは、 .fancyBg背後に移動するための絶対的な位置付け.fancyBg (ゼロの値を使用するか、必要に応じてより適切な値を使用します)。


これは、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>


これらの答えのほとんどは、デザイナーが単色の背景を望んでいると仮定しています。 デザイナーが実際に写真をバックグラウンドとして望むのであれば、現時点での唯一の真の解決策は、 他のところで述べたjQuery TransifyプラグインのようなJavaScriptです。

私たちがしなければならないことは、CSSワーキンググループの議論に参加し、背景不透明属性を与えることです! それは複数の背景の機能と手を携えて動作するはずです。


しばらく前に、私はCSSを使っクロスブラウザの背景透明性についてこれについて書いた。

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


半透明のPNG画像を使用するか、CSS3を使用してください:

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

css3.info、Opacity 、RGBA、および妥協案 (2007-06-03)の記事があります。


半透明の背景色が単純な場合は、上記の解決策(CSS3またはbg画像)が最適なオプションです。 ただし、アニメーション、複数の背景などのような好きなことをしたい場合や、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つ(「cont」)であり、ペインのサイズを決定するのに役立ちます。

position: relativeペイン上の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レイヤー内の浮動要素は含まれません。 あなたはそれらがクリアされているか、そうでなければ含まれていることを確認する必要があります、または彼らは底から滑り落ちます。
  • 余白はペイン要素に、パディングはcont要素に移動します。 反対のもの(枠の余白や余白)を使用しないでください。そうしないと、ページがブラウザのウィンドウよりもやや広いなどの奇妙なことが発見されます。
  • 前述したように、すべてがブロックまたはインラインブロックである必要があります。 CSSを単純化するために、 <span>の代わりに<div>を使用してください。

display: inline-blockautoおよび特定width s / min-height sの両方を使用して、このテクニックの柔軟性をdisplay: inline-blockdisplay: inline-block

.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>

そして、ここでは広範囲に使用されている技術のライブデモがあります:


問題は、実際にあなたの例ではテキストが完全に不透明であることです。 pタグ内には完全な不透明度がありますが、 pタグは半透明です。

半透明のPNG背景画像をCSSで実現する代わりに追加することも、テキストとdivを2つの要素に分けてテキストをボックスの上に移動することもできます(例えば、マイナスマージン)。

それ以外の場合はできません。

編集:

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


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

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

Internet Explorer 6の透過PNGで説明されている方法を使用します。

それ以外、

two side-by-side sibling elementsを使ってそれを偽装することができます。 半透明にしabsolutely position the other over the topます。


純粋なCSS 3rgba(red, green, blue, alpha)を使用することができますrgba(red, green, blue, alpha)は必要な透明度です。 JavaScriptやjQueryは必要ありません。

次に例を示します。

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

要素の背景を半透明にするが、要素の内容(テキストと画像)を不透明にするため。 そのイメージのCSSコードを記述する必要があり、最小値を持つopacityという属性を1つ追加する必要があります。 例えば

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

//値が小さいほど透明度が高くなり、値が小さいほど透明度が低くなります。





opacity