#html #css
#HTML #css — код
Вопрос:
У меня есть значок svg в Твиттере без фона:
<img id = "twitter_icon" src = "pictures/twitter.svg" alt = "Nema">
#twitter_icon {
background-color: aqua;
}
Когда я добавляю к нему цвет фона, цвет заполняет саму иконку, а также квадратное пространство вокруг нее. Есть ли какой-нибудь способ залить саму иконку, чтобы цвет не выходил за границы значков?
Буду благодарен за любой ответ.
Комментарии:
1. сделайте свой вопрос и код чище , но я думаю, вам следует сделать это с помощью photoshop
Ответ №1:
Вы должны изменить свой цвет в svg файле, у него есть <style> правило.
<style>
.cls-1 {
fill: #cb1717;
}
</style>
Вы также можете изменить его в Photoshop.
Ответ №2:
<img> Тег используется для встраивания (добавления) изображения в HTML-страницу.
Изображения технически не вставляются на веб-страницу; изображения связаны с веб-страницами. <img> Тег создает пространство для хранения изображения, на которое ссылается ссылка. Это означает, что изображение, связанное этим тегом, технически не является частью вашего HTML кода.
Итак, что происходит background-color , так это то, что вы настраиваете, добавляя цвет к div тому, что содержит ваше изображение, и поскольку ваше изображение прозрачное (что, как я предполагаю, так и есть), оно отражает цвет фона, на котором оно находится.
Итак, что вы можете сделать, отредактировав цвет изображения в программе для редактирования изображений, например, photoshop или, если вы только что загрузили это изображение значка, попробуйте найти цветную версию, соответствующую желаемому цвету.
Ответ №3:
Вы можете использовать шрифт awesome, потому что его легче настроить по цвету. И после добавления fontawesome CDN замените свой код:
<img id = "twitter_icon" src = "pictures/twitter.svg" alt = "Nema">
С помощью этого кода:
<span style="color: aqua"><i class="fab fa-twitter"></i></span>
Вот ссылка для добавления в ваш <head> </head> :
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">