Trasparent text in html

Question

I have this:

But i want this:

Code is here:

    body {margin: 0;}
      img {
        width: 100%;
          position: absolute;
      }
      div {
        position: absolute;
        width: 300px;
          height: 100px;
          left: 100px;
          top: 100px;
          background-color: #ff08;
          text-align: center;
          font-size: 60px;
          line-height: 100px;
          font-family: arial;
          border-radius: 10px;
      }

<img src="https://cdn.pixabay.com/photo/2022/11/27/08/39/mountain-7619151_960_720.jpg">
<div style="width: 300px; height: 100px; position: absolute; background-color: #ff08; left: 100px; top: 100px; text-align: center;">TEXT</div>

How to do it? i can't use bacground-image instead img.

score 0 · Answer 1 · answered Jan 04 '23 at 12:29

0

Use opacity, with a rather low value:

body {
  margin: 0;
}

img {
  width: 100%;
  position: absolute;
}

div {
  position: absolute;
  width: 300px;
  height: 100px;
  left: 100px;
  top: 100px;
  background-color: #ff08;
  text-align: center;
  font-size: 60px;
  line-height: 100px;
  font-family: arial;
  border-radius: 10px;
  opacity: 0.3;
}

<img src="https://cdn.pixabay.com/photo/2022/11/27/08/39/mountain-7619151_960_720.jpg">
<div style="width: 300px; height: 100px; position: absolute; background-color: #ff08; left: 100px; top: 100px; text-align: center;">TEXT</div>

answered Jan 04 '23 at 12:29

Johannes

64,305
18
73
130

Doesn't this lower the opacity on the whole element rather than the text only? – Coolis Jan 04 '23 at 12:32
the color of the text is still black – Nitheesh Jan 04 '23 at 12:32
@Coolis on the whole element – Johannes Jan 04 '23 at 12:33

Trasparent text in html

1 Answers1