Question

我正在尝试将此图片作为徽标，因此它会显示在页面顶部。我试图放background-color:transparent;，但它仍然没有很好地混合。我只希望图像中的文字出现在页面上。有人可以帮帮我吗？我知道我是以一种非常愚蠢的方式做到的。

＆＃13;

* {
    margin: 0px;
    padding:0px;
}

body {
    background-color: black;
}

#logo {
    background-color: transparent;
}

＆＃13;

  <img src="https://i.stack.imgur.com/3jXRQ.png" id="logo">

＆＃13;

Answer 1

您可以尝试使用混合模式，但这可能会影响徽标颜色，具体取决于模式。

结构如下：

.blended {
  background-image: url(url.jpg);
  background-color: color;
  background-blend-mode: mode;

}

有以下几种模式：屏幕，叠加，变暗，变亮，褪色，灼热，强光，柔光，差异，排斥，色调，饱和度，色彩和亮度。

但更好的想法是在图形编辑器中更改徽标本身。

Answer 2

正如评论中所指出的，您的图片没有透明的背景。
它有白色背景。您需要编辑图像以获得透明背景。

或者，您可以尝试使用HTML / CSS完全创建徽标。以下是仅使用本机系统字体的示例。但是，使用@import或@font-face，您实际上可以使用徽标（图片）正在使用的确切字体。鉴于徽标的简洁性，您应该能够以这种方式忠实地重新创建它。

body {
    background: #000;
}

#logo {
    font-family: Arial, sans-serif;
    font-size: 40pt;
    font-weight: normal;
    letter-spacing: -1px;
    color: blue;
}

#logo em {
    font-family: serif;
    font-style: italic;
    font-size: 58pt;
    font-weight: bold;
    color: green;
}

#logo span {
    font-size: 48pt;
}

<h1 id="logo"><em>be</em><span>C</span>reative.com</h1>

通过更改背景颜色将图片作为徽标

2 个答案: