Как затемнить фоновую картинку css

Как затемнить фоновое изображение?

Я могу ее довольно просто осветлить при наведении через свойство opacity , но можно ли подобным образом сделать ее темнее?

Отслеживать
задан 28 апр 2022 в 13:30
81 6 6 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.block < --size: 180px; width: var(--size); height: var(--size); background: url(https://picsum.photos/200/300) no-repeat center / cover; transition: filter 0.2s ease-in; >.block:hover

.block < --size: 180px; width: var(--size); height: var(--size); background: url(https://picsum.photos/200/300) no-repeat center / cover; position: relative; >.block::before < width: 100%; height: 100%; display: block; content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s ease-in; >.block:hover::before

Отслеживать
ответ дан 28 апр 2022 в 13:34
Михаил Камахин Михаил Камахин
8,674 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
спасибо! пошел изучать фильтры
28 апр 2022 в 13:49
@levensta второй пример с просто opacity
28 апр 2022 в 19:37

• css
• background-image

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как изменить фоновое изображение средствами javascript

Надо изменить средствами javascript. Делаю так, но не работает:

Let body = document.querySelector('body'); body.background = '../img/apple_true.jpg'; 

Делал как здесь: Не получается изменить background image с помощью js , но все равно не получается. Что я делаю не так?

body.background = "url('../img/apple_true.jpg')"; 

Переписал так, но все равно не работает. Может, неправильно задаю ссылку на изображение? Скрипт находится в папке js, а изображение в папке img!

body.style.background = "url('img/apple_true.jpg')"; document.body.style.backgroundImage = "url(img/apple_true.jpg)"; 

Работает и так и так! Спасибо всем участникам за помощь! Подскажите, пожалуйста: почему ответ Stranger я вижу в одном формате, а Sergey в другом? Я недавно на площадке, и не очень хорошо ориентируюсь.

Переход картинок на чистом Javascript

Всем привет. Возник такой вопрос. Как можно реализовать плавный переход картинок (заднего фона) на чистом Javascript? Заранее спасибо Вопрос ещё в силе.

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 19 июл 2011 в 19:15
85 10 10 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Хм, боюсь без шаманств не обойтись. Первое что приходит на ум:

1. Сделать div ( position:relative; ), на весь родительский элемент (тот самый чей фон хотим плавно менять);
2. Положить на него текущий фон, сделать его не прозрачным (если пользователь начинает прокручивать колесиком мыши или тыкая на скроллбар, то придется перехватывать и прокручивать также картинку на этом диве);
3. Заменить фоновую картинку в родительском элементе, а дальше по таймеру делать фиктивный див постепенно прозрачным (opacity).

Таким образом получаем плавную смену, и самый кульминационный момент — разве эти красивости стоят того? 🙂

Отслеживать
ответ дан 19 июл 2011 в 19:46
2,026 1 1 золотой знак 11 11 серебряных знаков 18 18 бронзовых знаков

В данном случае мне нужно и важно реализовать это именно на чистом JS. Картинки (или цвета) должны меняться по таймеру. Всё равно спасибо за ответ

19 июл 2011 в 19:58

Без CSS вы ничего не добьетесь. Да и кто вам мешает создавать дивы на лету и назначать им стили прямо в JS 🙂

19 июл 2011 в 21:04

Сталкивался с похожей проблемой. Делал себе фан-сайт по Majesty 2. Там у меня просто прозначный див должен был быть, и я заморочился его сделать именно без картинок прозрачным. В общем я думаю что без fake-подложки, то есть без дива, который будет позиционироваться под фон сайта, не обойтись. Ну а там уже opacity.

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

Как затемнить фоновую картинку css

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

Это дает мне фон, который полностью покрывает страницу. Но я хочу затемнить его (без зависания или щелчка). Все, что я пробовал, НЕ достигало какого-либо затемнения (я пробовал фальшивые градиенты, reba и т. д.) и как-то мешает а также толкая их повсюду.

Курсы javascript

Пишу веб-приложение, в котором требуется затемнять некоторые изображения. До этого справлялся тем, что фон под изображениями был тёмным, и изображения затемнялись прописыванием им opacity

Подскажите способ затемнить изображение с помощью стилей, желательно без создания дополнительных элементов.

Вариант перекрывать изображения полупрозрачным чёрным div’ом не подходит. Нарисовать каждое изображение в двух вариантах — тёмном и нормальном — тоже не подходит.

Затемнение фона

Нужда попросила затемнить фон всего сайта при наведении на определённый объект. При этом сам объект должен оставаться при этом на первом плане. В мыслях подумал, что плёвое дело, и родил это:

Естественно, мой «хитроумный план» не сработал. Подскажите дурню решение, пожалуйста!

Заранее большое спасибо!

Ссылка на комментарий

Поделиться на других сайтах

2 ответа на этот вопрос

• Сортировать по голосам
• Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации:

1. Как поменять ник в css v91
2. Как поменять цвет ссылки css
3. Как понизить пинг в css
4. Как поставить картинку в центре css