Как следует из названия, как сделать изображение в теге IMG прозрачным, не делая фон прозрачным, используя только CSS? У меня нет доступа к HTML, поэтому я не могу создать DIV.
Изображение без прозрачности с красным фоном:
img {
background-color: red;
}
Изображение с использованием opacity: 0.2;:
img {
background-color: red;
opacity: 0.2;
}
Чего я хочу добиться с помощью CSS:
Пожалуйста, попробуйте это:
Используйте стиль прозрачности css для вашего тега изображения, а не в вашем div, который содержит изображение.
Предположим, у вас есть вот так:
<div class="img_container"><img src="myimage.png"></div>
Тогда CSS будет
div.img_container img {
opacity: 0.2;
filter: alpha(opacity=20); /* For IE8 and earlier */
}
Если у вас нет доступа к HTML, у вас остается единственный вариант использования нового background-blend-mode, который вы можете настроить так, чтобы приблизиться к тому, что вы хотите. Это потребует от вас использования background-image вместо использования его в файле src.
Другой способ — использовать хак для вставки контента ::before/after вместе с несколькими block с background и opacity. Для этого требуется какой-то контейнер, известные размеры img и, вероятно, немного больше ограничений.
Если ваше ограничение состоит в том, что вы можете только изменять CSS элемента img, то я думаю, что то, что вы хотите сделать, невозможно. Непрозрачность применяется к элементу HTML, включая его фон. Невозможно установить непрозрачность выбранных частей HTML-элемента.
Если вы можете использовать Javascript, вы можете написать сценарий, который оборачивает элемент(ы) img в элемент div или span и применяет тот же фон к этому элементу-оболочке. Это заставит тот же фон отображаться, когда элемент img прозрачен.
Jquery имеет функцию wrap, которую можно использовать для этого:
$(".classToWrap").wrap("<div class='wrapperClass'></div>");
Если Javascript тоже не вариант, то я не вижу способа сделать это с использованием только CSS.
imgс исходной непрозрачностью — поэтому покажите синий цвет, а не сделайте его прозрачным?: jsfiddle.net/vzL88xrr - person Lars Kristensen schedule 13.04.2016img. Но если вы можете изменить тегimg, есть ли причина, по которой вы не сможете обернуть его тегомdivи присвоить ему тот же цвет фона? - person Lars Kristensen schedule 13.04.2016