web-dev-qa-db-ja.com

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

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

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

background-imageを配置し、0.5のopacityを指定したいのですが、作成したテキストに完全な不透明度（1）が必要です。

このようにCSSを書くなら

.myDiv { opacity:0.5 }

everythingは不透明度が低くなります。これは望ましくありません。

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

htmlcsscss3backgroundbackground-image
71
Alon

いいえ、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擬似要素

別のトリックは、CSS 2.1 :beforeまたはCSS 3 ::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-indexと背景画像のz-indexを設定する必要があります。

テストケース

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

84
mekwall

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

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
120
GrmXque

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>
2
Harsukh Makwana
<!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％）

0
villager1

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/

0
abalter

どのソリューションも私にとってはうまくいきませんでした。他のすべてが失敗した場合、Photoshopに画像を取得し、何らかの効果を適用します。これにかかる時間は5分です。

0
user2060451

これは、テキストHi Hi ...に異なるdivクラスを使用することで実行できます。

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

これで、スタイルを

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

0
Supraja Machavaram

みなさんこんにちは、これをやったとうまくいきました

        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>
0
adragom