CSSを使用してテキストや画像を透明な背景にするにはどうすればよいですか。
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）。
Firefox 3とSafari 3では、 GeorgSchöllyが述べた のようにRGBAを使うことができます。
ちょっと知られているトリックはあなたが同様に勾配フィルターを使っているInternet 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)";
}
これは子要素に影響を与えずに、CSSaの背景の透明度、RGBaとフィルタを通してからです。
結果のスクリーンショット
これは、次のコードを使用している場合です。
<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>
これは私が思いつくことができる最良の解決策です、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または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 onペインは重要です。これは、ペインのサイズに合わせて背面のレイヤーに指示します。 （<p>タグを絶対値にする必要がある場合は、ペインを<p>から<span>に変更し、それを絶対位置の<p>タグで囲んでください。）
このテクニックが上記の類似のテクニックより優れている主な利点は、ペインが指定されたサイズである必要がないことです。上でコーディングされたように、それは全幅（通常のブロック要素レイアウト）に収まり、内容と同じ高さになるだけです。外側のペイン要素は、長方形である限り、好きなサイズに変更できます（つまり、インラインブロックは機能しますが、普通のインラインは機能しません）。
また、それはあなたに背景のための多くの自由を与えます。あなたはback要素に本当に何でも置くことができ、それがコンテンツの流れに影響を及ぼさないようにすることができます（あなたが複数のフルサイズのサブレイヤを望むなら、ちょうどそれらも位置を持っていることを確かめてください：上/下/左/右：自動）.
背景のインセット調整（上/下/左/右による）および/または背景の固定（左/右または上/下のペアの1つの削除による）を許可する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を必要とします。
気をつけるべきこと：
- Contレイヤーの内側にある浮動要素は含まれません。あなたはそれらがクリアされているかそうでなければ含まれていることを確認する必要があります、または彼らは底から滑り落ちるでしょう。
- 余白はpane要素に行き、paddingはcont要素に行きます。反対側（contの余白やペインの余白）を使用しないでください。ページが常にブラウザウィンドウよりも少し広くなるなどの不自然さを感じるでしょう。
- 前述のように、全体はブロックまたはインラインブロックである必要があります。 CSSを簡素化するために、
<div>sの代わりに<span>sを使用してください。
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>そしてこれが 実際のデモ で広く使われているテクニックです。
半透明の.pngを使うのが良いでしょう。
Photoshop を開き、2x2ピクセル画像を作成します（ 1x1を選択するとInternet Explorerのバグが発生する可能性があります！ ）。緑色で塗りつぶし、[レイヤー]タブの不透明度を60に設定します。 ％それを保存して背景画像にします。
<p style="background: url(green.png);">any text</p>
もちろん、素敵な Internet Explorer 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>ブラウザのサポートは Internet Explorer 8 以降です。
最も簡単な方法は、半透明の背景PNG imageを使うことです。
必要に応じて、JavaScriptを使用してInternet Explorer 6で機能させることができます。
私はInternet Explorer 6の透明PNG -で概説した方法を使います。
それ以外、
あなたはtwo side-by-side sibling elementsを使ってそれを偽造することができました - _oneを半透明にしてください、そしてabsolutely position the other over the top？
このメソッドを使用すると、単色ではなく背景に画像を表示できます。また、枠線などの他の属性を透明にすることができます。透明なPNG画像は必要ありません。
CSSで:before（または:after）を使用して、要素を元の不透明度のままにするために不透明度の値を指定します。そのため、：beforeを使って偽の要素を作り、それにあなたが望む透明な背景（またはボーダー）を与え、それをz-indexで不透明にしたいコンテンツの後ろに移動させることができます。
例（ fiddle ）（クラス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タグ内は完全に不透明ですが、pタグは半透明にすぎません。
CSSで実現する代わりに半透明のPNG背景画像を追加するか、テキストとdivを2つの要素に分割してテキストをボックスの上に移動することができます（たとえば、負の余白）。
そうでなければそれは可能ではないでしょう。
編集：
クリスが言ったように：あなたが透明性のあるPNGファイルを使うならば、あなたはそれが厄介なInternet Explorerで動くようにするためにJavaScript回避策を使わなければなりません...
これらすべての答えは、デザイナーが無地の背景を望んでいることを前提としています。デザイナーが実際に背景として写真を望んでいるなら、現時点での唯一の本当の解決策はjQuery TransifyプラグインのようなJavaScriptです - 他で言及された 。
私たちがする必要があるのは、CSSワーキンググループのディスカッションに参加して、それらを私たちにbackground-opacity属性にすることです。複数背景機能と連携して動作するはずです。
これが私のやり方です（これは最適ではないかもしれませんが、うまくいきます）。
半透明にしたいdivを作成します。それにクラス/ IDを与えます。 EMPTYのままにして閉じます。それに設定された高さと幅を与えます（例えば、300 x 300ピクセル）不透明度0.5または好きなものを背景色にします。
次に、そのdivのすぐ下に、別のクラス/ IDを持つ別のdivを作成します。その中に段落を作成し、そこにあなたのテキストを置きます。 divの位置をrelative、top：-295pxにします（これは、295ピクセルです）。それをわかりやすくするために2のzインデックスを与え、その不透明度が1であることを確認します。好きなように段落をスタイルしますが、寸法が最初のdivの寸法より小さくなるようにします。
それでおしまい。これがコードです：
.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で動作します、私はInternet Explorerについて知りません。
これはあなたのためにすべてを扱うjQueryプラグインです、Transify（Transify - 要素の背景に透明度/不透明度を簡単に適用するためのjQueryプラグイン）。
私は時々この問題に遭遇していたので、私は人生をずっと楽にする何かを書くことにしました。このスクリプトは2 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**
}
要素の背景を半透明にし、要素の内容（テキストと画像）を不透明にするため。あなたはその画像のCSSコードを書く必要があります、そしてあなたは最小値でopacityと呼ばれる一つの属性を追加しなければなりません。例えば.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
//値が小さいほど透明になり、値が小さいほど透明になります。
背景色：rgba（255,0,0,0.5）; 上記のように簡単に言えばベストアンサーです。 2013年であっても、CSS3を使用するのは簡単ではありません。さまざまなブラウザからのサポートのレベルが反復ごとに変わるためです。
background-colorはすべての主要ブラウザでサポートされていますが（CSS3の新機能ではありません）[1]、特にバージョン9より前のInternet Explorerおよびバージョン5.1より前のSafariの境界色では、アルファ透明度が難しいことがあります。 [2]
Compass または _ sass _ のようなものを使用すると、本番環境およびクロスプラットフォームの互換性に非常に役立ちます。
CSS3はあなたの問題を簡単に解決します。つかいます：
background-color:rgba(0,255,0,0.5);
ここで、rgbaは赤、緑、青、そしてアルファ値を表します。 ２５５のために緑色値が得られ、０．５のアルファ値によって半透明度が得られる。
Less を使用している場合は、fade(color, 30%)を使用できます。
あなたは純粋な CSS 3 ：rgba(red, green, blue, alpha)を使うことができます、ここでalphaはあなたが望む透明度のレベルです。 JavaScriptやjQueryは必要ありません。
これが一例です。
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Internet Explorer 8 でこれを解決するには、グラデーション構文を使用します。カラーフォーマットはARGBです。 Sass プリプロセッサを使用している場合は、組み込み関数 "ie-hex-str（）"を使用して色を変換できます。
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
<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>
_ css _ に _ rgba _ (red, green, blue, alpha)を使用できます。
だから、単にあなたの場合にはこのような仕事をするつもりのように何かをする：
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
同じdivの画像の上にオーバーレイを置くより簡単な解決策があります。それはこのツールの正しい使い方ではありません。しかし、CSSを使用してそのオーバーレイを作成するのは魅力的です。
このような挿入影を使用してください。
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
それで全部です ：）
下記の例のように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>私の視点で私達がこれを使用すれば不透明と背景色を使用する最もよい方法に従って私達はテスト色およびボーダー等のような他の要素のための不透明を失うことはない。
background-color: rgba(71,158,0,0.8);
背景色を不透明にする
背景色：rgba（R、G、B、不透明度）。
私は通常このクラスを仕事に使います。それはかなり良いことです。
.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 */
}