0

i want to make a div with black background but the text should be transparent with red border. Any idea?

till now i have been able to make my text transparent but when i add background color to the div, it makes text background with the same color.

See this fiddle

HTML:

<div class="text">
    <h1>EXPERIENCES</h1>
</div>

CSS:

.text {
    position: absolute;
    top: 0; 
    background-color: #000;
    overflow: hidden;
}
.text h1 {

    font-size: 112px;
    -webkit-text-stroke-color: red;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;

}
baao
  • 71,625
  • 17
  • 143
  • 203
Rahul
  • 928
  • 5
  • 8
  • this is what i have tried till now http://jsfiddle.net/oo6cj7vb/ – Rahul Nov 06 '14 at 00:42
  • 1
    possible duplicate of [How to make "see through" text?](http://stackoverflow.com/questions/26642359/how-to-make-see-through-text) – Paul Nov 06 '14 at 00:42

1 Answers1

0

Try:

div { background:rgba(0,0,0,1);
      color:rgba(255,255,255,0.5);
      -webkit-text-stroke-color: red;
      -webkit-text-stroke-width: 3px;
      font-size:100px;
    }
Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100