CSS3 - Transparent text through `div`?

Question

I was looking for this.
But when I tried it, it won't work.

The text is transparent, but not through the div, which is the big idea.

.title1_background {
    background-color: rgba(255, 255, 255, 0.8);
    height: 20%;
    width: 100%;
    position: fixed;
    bottom: 8%;
    margin: 0;
    left: 0;
    text-align: center;
}

.title1_background h1 {
    font-size: 400%;
    display: block;
    -webkit-text-fill-color: transparent;
}

possible duplicate of [HTML/CSS: "See Through Background" Text?](http://stackoverflow.com/questions/10957082/html-css-see-through-background-text) — Mr. Alien, May 27 '14 at 06:51
no luck with firefox but working in chrome http://css-tricks.com/examples/ImageUnderText/ — Amit, May 27 '14 at 07:22
@Mr.Alien I actually linked it to my question. I tried it but couldn't get it working. That's what this question is about — Claudio, May 27 '14 at 07:43
@Claudio the question I've linked is a different one, there are two properties to be used, you are using a single property — Mr. Alien, May 27 '14 at 07:45

Animesh · Accepted Answer · 2014-05-27T07:10:08.497

1

The better way is to use two images.

The background image and the image with hollow text above it.

You can achieve the same using -webkit-text-fill-color: transparent; but this would only work with browsers supporting -webkit.

see this link it works fine in chrome since it supports -webkit but won't work in firefox.

See the browsers and their versions that support -webkit

We should always prefer to design and develop that supports cross browser compatibility.

edited May 27 '14 at 07:10

answered May 27 '14 at 06:58

Animesh

1,005
10
20

1

This fiddle is not yours - http://stackoverflow.com/questions/18523557/transparent-text-inside-non-transparent-div#comment27240865_18523557 If it is the same question, consider flagging the question as a duplicate – BoltClock May 29 '14 at 05:46
yeah i used that fiddle to just demonstrate a comparison. Will consider flagging from the next time. Thanks @BoltClock – Animesh May 29 '14 at 08:19

score 0 · Answer 2 · answered May 27 '14 at 06:55

Try This link

<div id="outer">
<div id="wrapper">
    <div id="inner">TEXT</div>
</div>

CSS

#outer {
width:300px;
height:300px;
background-image: url(http://www.placekitten.com/300/300);
overflow:auto;
 }
#wrapper {
background: #fff;
margin: 100px 0;
opacity:0.6;
}
#inner {
font: bold 60px Arial;
text-align:center;
margin:20px;
background-color: #fff;
background-image: url(http://www.placekitten.com/300/300);
background-position: 280px 201px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outer:hover{
border:solid 2px #4072B4;
}

This fiddle is not yours - http://stackoverflow.com/questions/18523557/transparent-text-inside-non-transparent-div#comment27240865_18523557 If it is the same question, consider flagging the question as a duplicate — BoltClock, May 29 '14 at 05:46

CSS3 - Transparent text through `div`?

2 Answers2