我想在我的页面中放置一个 Logo ,该页面已经有背景。 Logo 采用 .png 格式,因此它有一些透明区域,但使用我的代码,这些区域显示为白色。我现在是 super 菜鸟,所以这就是我可能无法实现这一目标的原因。
这是我的 HTML 文件:
<body>
<div class="logo">
<img src="img/logo.png" class="center">
</div>
<div class="form">
....
</div>
</body>
虽然这是我的 CSS:
img.center {
float: left;
height: 150px;
width: 520px;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
opacity: 0.7;
}
body {
font-family: Helvetica;
background: url("img/background.jpg");
background-size:cover;
}
使用上面的代码,我在左上角有 Logo ,但不是透明位而是白色(就像将 .png 图像保存为 .jpg 一样)。
我试图以这种方式为名为“logo”的 div 设置样式:
div.logo {
background-image: url("img\logo.png");
float: left;
height: 150px;
width: 520px;
}
但使用它, Logo 就会消失。我也尝试使用属性 z-index 但没有任何结果。
谢谢
最佳答案
首先,您的图像路径需要一个正斜杠:
div.logo {
background-image: url("img/logo.png");
float: left;
height: 150px;
width: 520px;
}
您确定您保存的 .png 是透明的吗?
你能提供一个链接吗?
关于html - 在 HTML 中将 Logo 添加到背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45508128/