Question

我正在为我的网站设计一个标题菜单。我想在标题菜单上放置我的徽标，以便得到类似这样的内容： headerMenu

但是，有了我的CSS，我得到的是： headerMenu Faulty

我的CSS是：

*{
background-color: #DBDBDB;
 }

.headerMenu{

background-image: url(../img/headerMenu.png);
height: 50px;
border-top: 0px;
border-bottom: 0px;
padding-top: 0px;
padding-left: auto;
padding-right: auto;
width: 100%
}

#wrapper{
background-image: url(../img/headerMenu.png);
margin-right: auto;
margin-left: auto;
width: 1000%;
padding-top: 0px;
padding-bottom: 0px;

}

.logo{
width: 80px;
}

.logo img
{

padding-left: 50px;
width: 150px;
height: 38px;
}

PS：徽标是透明的。我不知道为什么会这样。请帮帮我。

HTML：

<!doctype html>
<html>


<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>

    <div class="headerMenu">
        <div id="wrapper">
            <div class="logo">
                    <img src="./img/logoS.png"/>
            </div>

        </div>
    </div>


</body>

</html>

Answer 1

从

中删除背景颜色

*{
background-color: #DBDBDB;
}

将其设为

body{
background-color: #DBDBDB;
}

Answer 2

解决方案1 

卸下：

*{
background-color: #DBDBDB;
 }

并且仅将其应用于您需要的元素（可能是body或.wrapper）。

解决方案2 删除.logo和img

的背景

.logo, img {
    background-color:none;
}

透明徽标与标题菜单重叠

2 个答案: