Как сделать прозрачность картинки в css

Прозрачность картинки через стиль CSS

Причин добавить прозрачности элементам сайта может быть сотни, а вот решить эту задачу не так уж много. Главным образом, надо суметь обернуть объект в стиль CSS , либо отредактировать имеющийся.

Есть два параметра CSS, которые отвечают за регулировку прозрачности веб-элемента:

  1. opacity: xx;
  2. filter:alpha(opacity= xx);

Вся разница в том, что первый более универсальный — подходит для большинства браузеров, второй же напротив используется только всемействе Internet Explorer. Собственно, именно поэтому эти параметры используются попарно с равными значениями:

  1. xx = от 0,1 до 1;
  2. xx = от 1 до 100.

Пример 1. Стиль для добавления прозрачности изображению

Как видно из рисунков выше, слева отображён оригинал изображения, а справа его копия с применённым стилем — 30% прозрачности.

Исходный код примера выглядит так:

<div style=&#187;opacity: 0.7; filter: alpha(opacity=70);»><img src=&#187;Logo-World-X.jpg&#187; width=&#187;150&#8243; height=&#187;89&#8243; /></div>

Пример 2. Изменение прозрачности по наведению курсора

Тоже самое можно проделать, если добавить новый стиль в файл шаблона «Styles CSS», ещё и дополнить действием по наведению курсора:

.img1 <
opacity:0.7;
filter:alpha(opacity=70);
>
.img1:hover <
opacity:1;
filter:alpha(opacity=100);
>

Вторая часть стиля &#171;img1:hover&#187;, как раз, и отвечает за наведение курсора. В нашем случае картинка будет иметь на 30% прозрачность в начале, и 100% после наведения на неё курсора мышки.

Чтобы обернуть код картинки в новый стиль добавьте после «<img&#187; параметр класс &#171;Class=&#187;img1&#8243;&#187;, а далее код без изменений.

Вместо послесловия

Вот и всё, значения можно менять в пределах разумного, чтобы оставить видимым объект на странице. И как, нетрудно догадаться, во втором примере можно поменять местами параметры со значениями, так чтобы по наведению картинка принимала полу прозрачность, а не наоборот.

Как можно поменять прозрачность background-image не меняя прозрачности остального содержимого блока?

Как можно поменять прозрачность картинки через opacity заданной с помощью background-image не меняя при этом прозрачности всего остального содержимого div ?

Меняя opacity класса "block" естественно будет меняться opacity и заголовка в том числе, но нужно только background-image

Такого свойства как background-opacity нет, но есть такая альтернатива: можно заменить background псевдоэлементом, и применить opacity уже к нему.

Если это просто какой-то цвет, то можно задать его с помощью rgba .

А если картинка, то никак. Можно воспользоваться png фоном, либо сделать замену, когда нужно, например если экран стал маленький и нужно сделать фон прозрачным, то можно использовать media и просто подменить на картинку с нужной прозрачностью.

Полупрозрачный фон

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (html):

Строчка "" подключает файл стилей CSS.

Вот он (он называется style.css):

В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.

Вот так всё просто. Пробуйте, у вас обязательно всё получится!

* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *