divの背景画像にのみ不透明度を設定できますか？

86

私が持っているとしましょう

<div class="myDiv">Hi there</div>

私は入れたいbackground-imageとそれを与えるopacityのを0.5-しかし、私は私が書かれているテキストが（完全に不透明になりますことをしたいです1）。

このようにCSSを書くとしたら

.myDiv { opacity:0.5 }

すべてが不透明度が低くなります–そして私はそれを望んでいません。

だから私の質問は-完全な不透明度のテキストで低不透明度の背景画像を取得するにはどうすればよいですか？

html  css  background  background-image 
— アロン
ソース
stackoverflow.com/questions/6624457/…（Philの回答の下に）css不透明度を使用してそれを行う方法を示すコメントがあることに注意してください（それが好ましい方法である場合）。（jsfiddle.net/4tTNZ）
— Joonas
この答えははるかに簡潔であり、私はまったく同じだと信じています。
— JohnAllen 2014

回答:

102

いいえ、opacityコンテンツを含む要素全体に影響し、この動作を変更する方法がないため、これを行うことはできません。これは、次の2つの方法で回避できます。

二次div

divコンテナに別の要素を追加して、背景を保持します。これは最もクロスブラウザに適した方法であり、IE6でも機能します。

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

jsFiddleのテストケースを参照してください

：beforeおよび:: before疑似要素

もう1つのトリックは、CSS2.1:beforeまたはCSS3の::before疑似要素を使用することです。:before疑似要素はバージョン8以降のIEでサポートされていますが、::before疑似要素はまったくサポートされていません。これは、バージョン10で修正されることを願っています。

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

その他の注意事項

の動作によりz-index、コンテナのzインデックスz-indexと、背景画像のネガを設定する必要があります。

テストケース

jsFiddleのテストケースを参照してください。

— mekwall
ソース
2
z-indexで負の値を使用することになると、私は非常に妄想的です。しかし、結果については議論できません。ただし、ie6が親div内でbgを拡散できるようwidth: 100%; height: 100%;に、を追加し.bgます。jsfiddle.net/sbGb4/2
— Joonas
私が見逃しているcss3のトリックがあると思いましたが、これも素晴らしいです！
— アロン2011
@Lollero良い点！z-indexは苦痛ですが、親に正のインデックスを与える限り、これは比較的安全なはずです。
— mekwall 2011
@Alon質問の投稿の下に書いたコメントを確認してください。css3オプションであるrgbaを含む他のいくつかのオプションがある別の質問へのリンクがあります。古いものにはかなり良いトリックがあります。つまり、css-tricks.com / 2151
— Joonas
@Alon::before疑似要素を使用して別のメソッドを追加しました。これはあなたが探していたものでしたか？
— mekwall 2011
155

だからここに別の方法があります：

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
— GrmXque
ソース
3
@jj_：当時、のサポートは非​​常に限られていたためですlinear-gradient。私が書いた受け入れられた答えは4歳以上です;）
— mekwall 2015
3
質問にコメントやちょっとした更新を追加して、これが新しい良い方法であることを知らせることができるかもしれません。新しいアップデートについては4年後に会いましょう;）
— jj_ 2015
@jj_：実際、このソリューションでは画像が透明になりません。その上に50％の透明度を持つ白いレイヤーを追加するだけです。したがって、それは質問に対する有効な答えではありません。
— mekwall 2016年
7
それが質問の意図を達成することに同意できると思うので、そうです、それは質問に対する有効な答えです。
— デビッドクラーク
ええ..この答えはそこにある最も単純なものです..そうでなければ絶対的なポジショニングはそこに混乱します
— Harkirat Saluja 2016
4

css

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

<div> put your div content</div>
— ハルスク・マクワナ
ソース
0

これは、テキストHi There ...に別のdivクラスを使用して実行できます。

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

これで、スタイルをに適用できます

鬼ごっこ。それ以外の場合はbgクラス。私はそれがうまくいくと確信しています

— Supraja Machavaram
ソース
0

Marcus Ekwallのソリューションを実装しましたが、いくつかの要素を削除してシンプルにすることができ、それでも機能します。たぶん2017バージョンのhtml / css？

html：

<div id="content">
  <div id='bg'></div>
  <h2>What is Lorem Ipsum?</h2>
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

css：

#content {
  text-align: left;
  width: 75%;
  margin: auto;
  position: relative;
}

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
  opacity: .4;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/abalter/3te9fjL5/

— アバルター
ソース
1
これは私の答えの「Secondarydiv」と同じことをしていますが、唯一の違いはz-indexを省略したことです（これは今日では動作が異なり、ブラウザによっても異なる可能性があります）。しかし、ブラウザが期待どおりに動作することを信頼することは、通常は悪い考えです。
— mekwall 2017年
0

みなさん、こんにちは。これをやったのですが、うまくいきました。

	var canvas, ctx;

		function init() {
			canvas = document.getElementById('color');
			ctx = canvas.getContext('2d');

			ctx.save();
			ctx.fillStyle = '#bfbfbf'; //  #00843D   // 118846
			ctx.fillRect(0, 0, 490, 490);
			ctx.restore();
		}
section{
		height: 400px;
		background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		position: relative;
	
}

canvas {
	width: 100%;
	height: 400px;
	opacity: 0.9;

}

#text {
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	text-align: center;
}


.middle{
	text-align: center;
	
}

section small{
	background-color: #262626;
	padding: 12px;
	color: whitesmoke;
  letter-spacing: 1.5px;

}

section i{
  color: white;
  background-color: grey;
}

section h1{
  opacity: 0.8;
}
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Metrics</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
</head>  
  
<body onload="init();">
<section>
<canvas id="color"></canvas>

<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics &amp; WEB</small>
</div>
</section>
スニペットを展開

— adragom
ソース
0 
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>

4セットの数値を含めると、cmykではなくrgbaになりますが、どちらの方法でも機能します（rgba = 00000088、cmyk = 0％、0％、0％、50％）

— 村人1
ソース
-1

どの解決策も私にはうまくいきませんでした。他のすべてが失敗した場合は、Photoshopに画像を取得し、何らかの効果を適用します。5分対これに多くの時間...

— user2060451
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.