CODEWITHSUNDEEP
htmlcss
RS92
RS92

Reputation: 485

Why I can't set transparent color for text

I have on picture, over her one span.

My span have background color white, and i want to set text transparent.

Like this: http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG

I tried:

Background-color:white;
color:transparent;

But not working.

HTML:

<div class="col-md-12 picturebee no-padding">
        <img class="beepic" src="img/img7.jpg" alt="Picture bee">
        <span class="text">Lorem ipsum dolor!</span>
    </div>

CSS

.picturebee{
    margin-top:50px;
    position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
color:white;
font-family: 'Cuprum', sans-serif;
       left: 35%;
  transform: translateX(-26%);
  text-shadow: 1.4px 1.4px #222;

}

Upvotes: 0

Views: 300

Answers (4)

Wavemaster
Wavemaster

Reputation: 1814

Just set the text-color to transparent will not work!

Explanation: if you use background: white; and color: transparent;, you got a transparent text over a white background. You won't "erase" the background: white;.

To solve your problem, you could add a second span and use background-clip: text; (but this only works in webkit)

For more browser support, you can check this site: https://css-tricks.com/image-under-text/

.picturebee {
  margin-top: 50px;
  position: relative;
  height: 160px;
  width: 588px;
  background: url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
}
.picturebee span.box {
  background: white;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 500px;
  height: 60px;
}
.picturebee span.text {
  position: absolute;
  top: 20px;
  background: -30px -20px url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
  font-size: 53px;
  color: transparent;
  -webkit-background-clip: text;
  font-family: 'Cuprum', sans-serif;
  left: 30px;
  word-wrap: no-break;
}
<div class="col-md-12 picturebee no-padding">
  <span class="box"></span>
  <span class="text">Lorem ipsum dolor!</span>
</div>

Also you could set the picture as background instead of adding it as an img

Upvotes: 0

David Sousa
David Sousa

Reputation: 130

If it's an image:

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

source: http://www.w3schools.com/css/css_image_transparency.asp

Upvotes: -1

Neha Prakash
Neha Prakash

Reputation: 581

try this css:

.picturebee{
    margin-top:50px;
    position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
background-color:white;
font-family: 'Cuprum', sans-serif;
       left: 35%;
  transform: translateX(-26%);
  text-shadow: 1.4px 1.4px #222;

}
.text{opacity: 0.5;}

Upvotes: 3

Gustavo Henrique
Gustavo Henrique

Reputation: 138

You can try the

opacity: 0.0; Propriety

Right code :

  .picturebee{
            margin-top:50px;
            position: relative;
        }
        .picturebee span{
        position: absolute;
        top:30px;
        font-size:53px;
        color:white;
        font-family: 'Cuprum', sans-serif;
               left: 35%;
          transform: translateX(-26%);
          text-shadow: 1.4px 1.4px #222;
          opacity: 0.0;

        }

Upvotes: 1

Related Questions