html - How can I make a div with a box-shadow overlay its h1 child element? -
i have div box-shadow , h1 inside, shadow doesn't cover h1
here code:
h1 { position: absolute; top: 50%; left: 44%; -webkit-transform: translate(-44%, -50%); transform: translate(-44%, -50%); margin: 0; font-size: 120px; text-align: center; } #div{ width:100%; box-shadow:inset 0 0 0 1000px rgba(255,0,0,0.5); height:400px; } <div id="div"><h1>hi</h1></div>
it appears question want div shadow cover h1.
to accomplish apply negative z-index h1.
h1 { z-index: -1; } demo: http://jsfiddle.net/rzhfqb5y/
the shadow covers h1.
Comments
Post a Comment