Блог

Главная - Вопросы по программированию - Я не могу изменить цвет фона моего изображения с помощью внешнего css

Я не могу изменить цвет фона моего изображения с помощью внешнего css

#html #css

#HTML #css

Вопрос:

 body {
    background-color: #f6f7d4;
}

h1, h3, hr {
    color: #68b8ab;
}

hr {
    width: 100px;
    border-style: dotted none none;
    border-color: gray;
    border-width: 5px;
}

img {
    background-color: black;
}

Приведенный выше мой внешний CSS-код, но он не работает на моей html-странице, как вы видите на изображении ниже.

скриншот моего html-сайта

Комментарии:

1. Здравствуйте, вы можете поделиться своим HTML-кодом? Я думаю, вы пытаетесь изменить желтый цвет. Вы связали свой внешний CSS с вашим HTML?

2. Изображение — это изображение… CSS не имеет возможности изменять его части. Если вы не начнете накладывать элементы на основе непрозрачности поверх, но это будет нелегко или не будет хорошо выглядеть. Подумайте об этом так: вы попросили его изменить «background-color»… но как именно браузер должен знать, что такое фон ?

3. Подождите, вы ожидаете изменить цвет неба на этой фотографии с помощью css или я вас неправильно понял?

4. Добрый день, вам нужно поместить свой <img> внутрь <div> . Дайте этому <div> ширину. Теперь, когда вы пытаетесь изменить background-color , вы меняете его на <div> , а не <image> .

Ответ №1:

К сожалению, невозможно изменить цвета на фотографиях / изображениях, но вы можете добавить к нему фильтр, например filter: hue-rotate(50deg); (исказить оттенок, чтобы изменить все цвета на фотографии) или filter: grayscale(30%);

Я бы назвал изображение классом css, чтобы вы не предназначались для всех изображений на вашем сайте, что-то вроде этого:

 <img class="portrait" src="../path/to/img/my-portrait.jpg">

А затем css:

 img.portrait {
  filter: grayscale(30%);
}

Ответ №2:

 img{
  background-color: yellow;
}  
 <img src='https://cdn.sstatic.net/Sites/stackoverflow/company/Img/logos/so/so-icon.png?v=c78bd457575a'/>

Как сказано в комментарии, если у вас простые изображения, вы не сможете увидеть цвет фона, поскольку изображения будут покрывать все это. Это будет работать только с изображениями с прозрачностью.