Question

我的内部有box-shadow和h1的div，但阴影并不涵盖h1

这是我的代码：

＆＃13;

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;
    
}

＆＃13;

<div id="div"><h1>hi</h1></div>

＆＃13;

Answer 1

从您的问题中可以看出，您希望div阴影覆盖h1。

要完成此操作，只需将否定z-index应用于h1。

h1 { z-index: -1; }

DEMO：http://jsfiddle.net/rzhfqb5y/

阴影现在涵盖了h1。

如何使用框阴影叠加其h1子元素？

1 个答案: