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

Question

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ます。

score 2355 · Accepted Answer

半透明のPNGまたはSVG画像を使用するか、CSSを使用します。

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

これは、css3.info、Opacity、RGBA、および妥協案（2007-06-03）の記事です。

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

score 482 · Accepted Answer

Firefox3とSafari3では、GeorgSchöllyが述べたようにRGBAを使用できます。

あまり知られていないトリックは、グラデーションフィルターを使用してInternetExplorerでも使用できることです。

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)";
}

これは、子要素に影響を与えずにCSSの背景の透明度から、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>

Chrome-33 IE11 IE9 IE8

score 115 · Accepted Answer

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

score 66 · Accepted Answer

単純な半透明の背景色の場合、上記のソリューション（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つ（「続き」）にはコンテンツが含まれており、ペインのサイズを決定するのに役立ちます。

オンペインposition: relativeは重要です。ペインのサイズに合うようにバックレイヤーに指示します。（タグを絶対位置にする必要がある場合は、ペインをaからaに変更し、すべてを絶対位置タグでラップします。）

この手法が上記の同様の手法に勝る主な利点は、ペインを指定されたサイズにする必要がないことです。上でコーディングしたように、全幅（通常のブロック要素レイアウト）に適合し、コンテンツと同じ高さになります。外側のペイン要素は、長方形である限り、任意のサイズにすることができます（つまり、インラインブロックは機能しますが、プレーンオールドインラインは機能しません）。

また、背景に多くの自由を与えます。本当に何でも後ろの要素に入れて、コンテンツの流れに影響を与えないようにすることができます（複数のフルサイズのサブレイヤーが必要な場合は、それらにも位置があることを確認してください：絶対、幅/高さ：100％、および上/下/左/右：自動）。

背景のはめ込み調整（上/下/左/右による）および/または背景の固定（左/右または上/下のペアの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が必要であり、前回チェックしたとき、2番目のCSSバリエーションはOperaでは機能しません。

注意事項：

contレイヤー内のフローティング要素は含まれません。それらがクリアされているか、そうでなければ封じ込められていることを確認する必要があります。そうしないと、底から滑り落ちてしまいます。
余白はpane要素に配置され、パディングはcont要素に配置されます。反対の方法（続きの余白やペインのパディング）は使用しないでください。そうしないと、ページが常にブラウザウィンドウよりわずかに広いなどの奇妙なことがわかります。
前述のように、すべてがブロックまたはインラインブロックである必要があります。CSSを単純化するために、s<div>の代わりにsを自由に使用してください。

display: inline-blockより完全なデモ。この手法を、、および両方のauto特定widthのs / 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>

そして、これが広く使われているテクニックのライブデモです：

score 58 · Accepted Answer

半透明を使用することをお勧めします.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');
}

score 58 · Accepted Answer

マークアップを最小化するための秘訣があります。背景として疑似要素を使用すると、メイン要素とその子に影響を与えることなく、不透明度を設定できます。

デモ

出力：

疑似要素による背景の不透明度

関連コード：

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>

ブラウザのサポートはInternetExplorer8以降です。

score 22 · Accepted Answer

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

必要に応じて、JavaScriptを使用してInternetExplorer6で機能させることができます。

InternetExplorer6の透過PNGで概説されている方法を使用します。

それ以外の場合は、2つの兄弟要素を並べて使用して偽造することができます。1つを半透明にしてから、もう1つを絶対に上に配置します。

score 21 · Accepted Answer

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

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

例（fiddle）（DIVwithクラス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あります（ゼロまたはニーズに適した値を使用してください）。

score 16 · Accepted Answer

問題は、例ではテキストが実際には完全に不透明であるということです。タグ内は完全に不透明ですpが、pタグは半透明です。

CSSで実現する代わりに、半透明のPNG背景画像を追加したり、テキストとdivを2つの要素に分割して、テキストをボックス上に移動したりできます（たとえば、負の余白）。

そうでなければ、それは不可能です。

クリスが述べたように：透明度のあるPNGファイルを使用する場合、厄介なInternetExplorerで機能させるにはJavaScriptの回避策を使用する必要があります...

score 15 · Accepted Answer

これらの回答のほとんどは、デザイナーが無地の背景を望んでいることを前提としています。デザイナーが実際に背景として写真を望んでいる場合、現時点での唯一の実際の解決策は、他の場所で言及されているjQueryTransifyプラグインのようなJavaScriptです。

私たちがする必要があるのは、CSSワーキンググループのディスカッションに参加して、背景不透明度属性を与えるようにすることです。複数の背景機能と連携して機能する必要があります。

score 14 · Accepted Answer

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

div半透明にしたいものを作成します。クラス/IDを指定します。空のままにして、閉じます。高さと幅を設定します（たとえば、300ピクセル×300ピクセル）。不透明度を0.5または好きなものに設定し、背景色を付けます。

次に、そのdivのすぐ下に、異なるクラス/IDを持つ別のdivを作成します。その中に段落を作成し、そこにテキストを配置します。位置を指定しdivます：相対、および上:(-295pxこれは負の295ピクセルです）。適切な測定のためにz-indexを2にし、不透明度が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>

これはSafari2.xで機能しますが、InternetExplorerについてはわかりません。

score 12 · Accepted Answer

これが、すべてを処理するjQueryプラグインであるTransifyです（Transify-要素の背景に透明度/不透明度を簡単に適用するためのjQueryプラグイン）。

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

score 11 · Accepted Answer

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

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

score 11 · Accepted Answer

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**
}

score 9 · Accepted Answer

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

score 8 · Accepted Answer

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

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

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

score 8 · Accepted Answer

要素の背景を半透明にし、要素のコンテンツ（テキストと画像）を不透明にするには、その画像のCSSコードを記述しopacity、最小値で呼び出される1つの属性を追加する必要があります。

例えば、

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

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

score 7 · Accepted Answer

背景色：rgba（255、0、0、0.5）; 上記のように簡単に言えば最良の答えです。2013年でもCSS3を使用すると言うのは簡単ではありません。これは、さまざまなブラウザーからのサポートのレベルが反復ごとに変わるためです。

すべての主要なブラウザでサポートされてbackground-colorいますが（CSS 3の新機能ではありません）[1]、特にバージョン9より前のInternetExplorerやバージョン5.1より前のSafariの境界線の色ではアルファ透明度が難しい場合があります。[2]

CompassやSASSのようなものを使用すると、本番環境とクロスプラットフォームの互換性に非常に役立ちます。

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

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

score 7 · Accepted Answer

7

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

于 2015-06-03T07:28:45.563 に答える

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

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

次に例を示します。

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

score 3 · Accepted Answer

<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/？

score 3 · Accepted Answer

rgba color code以下に示すこの例のようなCSSを使用してそれを行うことができます。

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

score 3 · Accepted Answer

私の見解によると、不透明度のある背景色を使用する最良の方法は次のとおりです。これを使用すると、テストの色や境界線などの他の要素の不透明度が失われることはありません。

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

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

background-color: rgba(R, G, B, Opacity);

score 2 · Accepted Answer

CSSでRGBA (red, green, blue, alpha)を使用できます。このようなもの：

したがって、このようなことを行うだけで、あなたのケースではうまくいくでしょう：

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

span {
  color: white;
}

score 1 · Accepted Answer

同じdivの画像にオーバーレイを配置する簡単な解決策があります。このツールの正しい使用法ではありません。しかし、CSSを使用してそのオーバーレイを作成するのは魅力のように機能します。

次のようなはめ込み影を使用します。

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

それで全部です：）

score 1 · Accepted Answer

16進値に追加された不透明度の値を使用できます。

background-color: #11ffeeaa;

この例aaでは不透明度です。の不透明度00は透明をff意味し、単色を意味します。

不透明度はオプションであるため、通常どおり16進値を使用できます。

background-color: #11ffee;

また、古い方法を使用することもできますrgba()：

background-color: rgba(117, 190, 218, 0.5);

また、background背景に画像やグラデーションなどの他のスタイルがないことを確認したい場合の省略形：

background: #11ffeeaa;

Mozillaの仕様（https://developer.mozilla.org/en-US/docs/Web/CSS/background-color）から：

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

score 0 · Accepted Answer

私は通常、このクラスを仕事に使用します。それはかなり良い。

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

score 0 · Accepted Answer

フォーマットを使用するときにそれは私のために働いた#AARRGGBBので、私のために働いたのはでした#1C00ff00。私はそれが他の誰かのために働いているのを見たので、それを試してみてください。CSSで使用しています。

score 0 · Accepted Answer

これにより、望ましい結果が得られます-

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

背景の不透明度を設定します。

score 0 · Accepted Answer

多くの人がここに到着し、要素（背景だけでなく）の不透明度を調整するopacity: 0.2方法を知りたいので、その要素のCSSに（または0から1までの任意の数を）追加するのと同じくらい簡単です。

例

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

これは、背景やヘッダー、段落などで使用できます。

score 0 · Accepted Answer

私は上記のすべての答えに同意し、rgbaが進むべき道です。私の場合、プログラムで16進の背景が提供されたので、16進コードに基づいて独自のrgbaを生成する必要があります。hexをrgbaに変換するためのDown氏の回答の修正バージョンを作成しました

function hexToRgba(hex,alpha) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(result!=null){
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      //
      return `rgba(${r},${g},${b},${alpha})`;

    }
    return null;
  }

score 0 · Accepted Answer

私はこれがあなたに望ましい出力を与えると思います：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

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

33 に答える 33

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

または：

例

Related

Reference