html - 在 HTML 中将 Logo 添加到背景

标签 html css image background png

我想在我的页面中放置一个 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/

相关文章:

html - CSS 否定伪类 :not() for parent/ancestor elements

javascript - IE 8 错误?元素卡入到位

html - Node.js HTML 和 CSS

css - 让浏览器从实时网站上的缓存中刷新的最佳方法?

javascript - 如何动态调整图像大小 - CSS/HTML

php - 重置操作的图像

javascript - Jquery html() 到 div 不起作用

javascript - 如何将 HTML 文件转换为 GIF

ios - Web App 访问 iOS 摄像头进行二维码扫描

css - 计算平移过程中旋转的 SVG 动画的 CSS 变换矩阵