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图像像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>

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

1 个答案: