我需要一些帮助来创建徽标并在 css 中反转

Question

有这个标志，来自Mccan Design

并且在某种程度上是倒置的，我正在尝试复制这种风格，但我对此很陌生，不知道该怎么做。 我已经在 Illustrator 中创建了徽标并将其保存为 .svg（不确定保存 .svg 时是否需要更改任何选项），并且在 index.html 中我将徽标添加为 img（如果我将其添加为svg 代码会破坏其他功能）：

<div id="logo">
<img class="title my-5" src="image/marketing-logo.svg" alt="Marketing">
</div>

在CSS中：

.logo  {
    filter: invert(88%) sepia(91%) saturate(1%) hue-rotate(257deg) brightness(107%) contrast(101%);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}

但它不起作用..

提前致谢

Answer 1

您正在使用带有类选择器的样式

1.要么改变

<div id="logo"> to <div class="logo">

或者在样式中使用#（id）选择器

#logo  {
    filter: invert(88%) sepia(91%) saturate(1%) hue-rotate(257deg) brightness(107%) contrast(101%);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}