Как сделать эффект затемнения в css?
Каким способом лучше сделать вот такой эффект? Создать блок в js и при наведении добавлять его?
- Вопрос задан более трёх лет назад
- 616 просмотров
1 комментарий
Простой 1 комментарий
Это работа для CSS, создается блок черного цвета с прозрачностью 0% поверх основного. При наведении прозрачность меняется на 100%.
Затемнение фонового изображение с помощью CSS
Всем привет, сегодня я вам расскажу как затемнить фоновое изображение с помощью CSS. Это часто нужно сделать с баннером или с шапкой сайта, где есть текст, который должен быть читабелен. И чтобы не затемнять каждое изображение в Photoshop, можно это сделать автоматически с помощью CSS. Здесь всё очень просто. Вот HTML код
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.
А вот CSS
header {
position: relative;
background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
header:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 2;
}
.inner {
position: relative;
z-index: 3;
color: #fff;
text-align: center;
padding: 50px;
}
И вы получите такую картину
Вот так просто можно затемнить фоновое изображение. На этом у меня всё. До новых статей.
Как изменить цвет PNG изображения с помощью CSS
Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.
Свойство filter применяет визуальные эффекты к элементу (изображению).
Оно имеет следующие значения:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;С помощью этих значений мы можем изменить цвет изображения.
Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.
Давайте попробуем пошагово изменить цвет изображения:
1. Создайте HTML.
- Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».
body> img src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> ![]()
" src="https://ru.w3docs.com/snippets/css/%3C/span%3Ehttps://www.sccpre.cat/mypng/detail/%3Cspan%20%3E122%3C/span%3E-%3Cspan%20%3E1229311%3C/span%3E_bird-feathers-flying-macaw-wings-birds-with-white.png%3Cspan%20%3E" width="500px" height="250px" alt="filter applied" />