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

Question

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

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

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

无论如何，我实际上找不到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图像就像在lostwithpurpose.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>