背景画像と重なる文字の色が影響を受けてしまう

Question

以下のようにして、img.svgを配置し、ユーザー番号1234567890123に一部重なるようにしたいのですが、重なる部分の文字色が薄くなってしまいます。

テキストと画像のz-indexを変えても影響は残ったままです。
どなたか、背景画像と重なる部分の文字色が影響を受けないように(つまり、重なっていても#2F4A70をキープ)する方法、教えてくださいませんか?

 <div class="content_inner">
      <div class="img_area"></div>

      <div class="user_info_area">
        <p class="user_number">ユーザー番号</p>
        <p class="bold">1234567890123</p>
      </div>
</div>

.content_inner {
    position: relative;
    padding-bottom: 1rem;

    .img_area {
      position: absolute;
      right: 0;
      background: url('../img/img.png');
      width: 130px;
      height: 111.9px;
      background-size: contain;
      background-position: center; 
      background-repeat: no-repeat;
    }
     
     .user_info_area {
       color:#2F4A70 ;
     }
}

Comments

[m.ts10806]

同じsvgを用意できるわけではないので、画面キャプチャなど提示いただけますか？

[m.ts10806]

うーん。この提示画像では何も分からないですね・・。

Answer 1

'../img/img.png'と記載があるので、svgではなく透過されたpngだとして。
文字の上に半透明のピンクが乗っている→その部分だけ違う色に見える　という状態かと思います。
.user_info_areaにもposition: absolute;を指定すればおそらくz-indexも効く（文字色が変わることが無い）と思いますが、他のレイアウトに影響があるかもしれませんね。

Comments

[dit.]

あ、解決してた。
一応参考に置いておきます。
https://saruwakakun.com/html-css/basic/relative-absolute-fixed

[yzmw131321]

ありがとうございます。position設定をしないと、そもそもz-indexが効いていなかったんですね。

Answer 2

z-indexが効かなかったのはdiv.user_info_areaにposition:absoluteが効いてないからですね。
https://codepen.io/anon/pen/NBrLzZ

Comments

[yzmw131321]

ご回答ありがとうございます。
z-indexの設定を無くして、div.user_info_areaに　position: relativeを設定した場合でも解決できました。

[SE-studying-now]

なるほど、position: relativeでもいけてますね。
あとはどのように重ねるかで指定の仕方が変わってくるかもですね。
解決できたようで良かったです。

[yzmw131321]

ええ、ご協力ありがとうございます。
なぜ、z-indexが効かなかったのかはじっくり検討しようと思います。