web-dev-qa-db-ja.com

背景画像には不透明度を適用しますが、テキストには適用しません

私の問題は、画像を暗くすると、クラス_.text_のテキストも暗くなり、これを回避する方法がわかりません。

私は1つの解決策を知っています：_.wrap_ _position:absolute_およびクラス_.text_をimageに作成しないことですが、この解決策は私には適していません（- this など） ）。

他のアイデアは？

これは私が持っているコードです：

_.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  opacity: 0.8;
  height: 100vh;
  max-height: 350px;
  min-height: 200px;
}
.text {
  color: #FFF;
  font-weight: 900;
}_
_<div class="wrap">
  <div class="image">
    <div class="text">
      <p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
        YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU</p>
    </div>
  </div>
</div>_

jsfiddleデモ

htmlcssopacity
11
Qwe

opacityはinheritプロパティではありませんが、コンテンツに影響するため、_.image_にも影響する_.text_の不透明度を上げると、疑似要素とbackground: rgba()を使用して、次のようにします。

ここで動作する JSFiddle で遊ぶ

_.wrap {
    width: 100%;
}
.image {
    background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");
    position: relative;
    height: 100vh;
}
.image:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
}
.text {
    color: #FFF;
    position: relative;
}_
_<div class="wrap">
    <div class="image">
        <div class="text">
            <p>I LOVE YOU</p>
        </div>
    </div>
</div>_
18
Yandy_Viera

opacityは要素全体（コンテンツを含む）に適用されます。

したがって、_div.text_は_div.image_にネストされているため、_div.image_に適用されるopacityはすべての子孫にも適用されます。

背景色を使用すると、rgba()を使用してプロパティに直接不透明度を適用できます。

_background-color: rgba(255, 0, 0, 0.6);
_

...そしてあなたの質問で提起された問題は回避されます。

ただし、背景画像では回避策が必要です。

オプションには、イメージ用の個別のdivの作成、または疑似要素の使用が含まれます。

これらのオプションといくつかの他のオプションについて、ここで詳しく説明します。

4
Michael_B

あなたはいつもウェブキットフィルターを適用してテキストを明るくすることができます

http://jsfiddle.net/RachGal/qxtwckts/ または次のスニペット http://jsfiddle.net/RachGal/qxtwckts/1/

#wrap {
  position: relative;
  float: left;
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
  height: 400px;
  width: 400px;
}
#wrap:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
}
p {
  font-size: 1em;
  color: white;
  text-align: left;
}
}
<div id="wrap">




  <div id="text">
    <p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
      YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU
      <p>
  </div>


</div>
1
Rachel Gallen

opacityはdiv全体に適用され、代わりにlinear-gradient()を使用してdivの代わりに画像をフェードします

.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  height: 100vh;
  max-height: 350px;
  min-height: 200px;
}
.text {
  color: #FFF;
  font-weight: 900;
}
<div class="wrap">
  <div class="image">
    <div class="text">
      <p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
        YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU</p>
    </div>
  </div>
</div>
0
kooskoos