Мне нужна помощь в добавлении текстового логотипа svg поверх обложки на моем веб-сайте. - PullRequest
Новая
       37

Мне нужна помощь в добавлении текстового логотипа svg поверх обложки на моем веб-сайте.

0 голосов
/ 10 апреля 2019

У меня есть два изображения 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;
    }
}

Я просто не вижу этого раздела с тегами src = в main.css. Я новичок в этом, но я действительно хочу достичь этого.

Не могу много попробовать, так как я не могу найти область, где это должно быть. 

.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

1 Ответ

0 голосов
/ 10 апреля 2019

Вы должны отделить текст от изображения "намеренный обход-2-1920x1080.jpg".Затем в html-разметке создайте тег img внутри .trawell-cover div.

Тег 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>
...