Question

以下代码显示子元素顶部的父文本，但不显示背景颜色：

*{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    perspective:1000px;
    -webkit-perspective:1000px;
}
.maindiv{
    color:black;
    width:80%;
    height:50px;
    margin:10px;
    flex-wrap:nowrap;
    position:absolute;
    z-index: 10;

}

.maindiv .facebook{
    background-color:red;
    display:block;
    position:relative;
}
.facebook:before{
    display:block;
    background-color:black;
    color:white;
    content:"Hover"; 
}
a{
    z-index:-999; 
    display:block;
    background-color:burlywood;
    text-decoration:none;
    color:black;
    font-size:larger;
    font-family:cursive;
    position:relative;
    height:33px;
    top:-40px; 
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="codecss.css" />
</head>
<body>
    <div class="maindiv">
        <div class="facebook">Facebook
            <a href="http://www.facebook.com">Facebook</a>
        </div>
    </div>
</body>
</html>

，我在这里看到很多关于这个问题的答案但是没有一个能够起作用，而且几乎所有人都在询问背景图像我不知道它是否有任何区别“

Answer 1

这是你正在寻找的，还是你想要红色下的黑色？只需删除

即可

top:-40px;

像这样

a{
z-index:-999; 
display:block;
background-color:burlywood;
text-decoration:none;
color:black;
font-size:larger;
font-family:cursive;
position:relative;
height:33px;

}

Answer 2

我得到了一个结果，但不知道这是否是你想要的结果，但它可能会有所帮助

＆＃13;

  *{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        perspective:1000px;
        -webkit-perspective:1000px;
    }
    .maindiv{
        color:black;
        width:80%;
        height:50px;
        margin:10px;
        flex-wrap:nowrap;
        position:absolute;
        z-index: 10;

    }

    .maindiv .facebook{
        background-color:red;
        display:block;
        position:relative;
    }
    .facebook:before{
        display:block;
        background-color:black;
        color:white;
        content:"Hover"; 
      position:relative;
      top:15px;
    }
    a{
        z-index:-999; 
        display:block;
        background-color:burlywood;
        text-decoration:none;
        color:black;
        font-size:larger;
        font-family:cursive;
        position:relative;
        height:33px;
        top:-10px; 
    }

＆＃13;

  
   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <link rel="stylesheet" href="codecss.css" />
    </head>
    <body>
        <div class="maindiv">
            <div class="facebook">Facebook
                <a href="http://www.facebook.com">Facebook</a>
            </div>
        </div>
    </body>
    </html>

＆＃13;

CSS显示父元素的背景颜色在孩子的背景颜色之上？

2 个答案: