我需要帮助在我网站上的封面图片上添加 svg 文本徽标

Question

我有两张 SVG 图像（一张用于移动设备，一张用于普通屏幕），我正在尝试找出将它们添加到代码中的位置。我已经创建了一个子主题。我打算将此代码用于我的标题结构：

.trawell-cover {
  background-image: url('https://intentionaldetours.com/wp-content/uploads/2019/02/intentional-detours-2-1920x1080.jpg');
  background-size: cover;
}

您将 src 属性替换为 SVG 的地址。

无论如何，我确实找不到 src= 标签的位置，也不知道我是否应该这样做：

.trawell-cover {
    position: relative;
}

img {
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}

img.desktopImage {
    display: block;
}

img.mobileImage {
display: none;
}

 ...

@media screen and (max-width: 500px) {
    .desktopImage {
        display: none;
           }

    .mobileImage {
    display: block;
    }
}

我只是在 main.css 中的任何地方都没有看到带有 src= 标签的这一部分。我对此很陌生，但我真的很想做到这一点。

由于找不到应该在的区域，因此无法尝试太多。

.trawell-cover {
position: relative;
}

img {
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}

img.desktopImage {
display: block;
}

img.mobileImage {
display: none;
}

...

@media screen and (max-width: 500px) {
    .desktopImage {
    display: none;
    }

    .mobileImage {
        display: block;
        }
    }

我希望我的 SVG 图像出现在我的网站上，例如网站 lostwith purpose.com

Answer 1

您必须将文本与图像“intentional-detours-2-1920x1080.jpg”分开。然后在您的 html 标记中在 .trawell-cover div 中创建一个 img 标签。

src="" 标签只存在于 img 标签中，不能在 css 中操作。

在 html 中应该是这样的：

<div class="trawll-cover">
   <!-- Add the url of Intentional Detours text in png/svg format in src I used your reference as example -->
   <img src="https://www.lostwithpurpose.com/wp-content/themes/Wander-child/img/lwp-wordmark-new.svg" width="300" height="auto">
</div>