Как затемнить фоновое изображение?
Я могу ее довольно просто осветлить при наведении через свойство 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
Сортировка: Сброс на вариант по умолчанию
Хм, боюсь без шаманств не обойтись. Первое что приходит на ум:
- Сделать div ( position:relative; ), на весь родительский элемент (тот самый чей фон хотим плавно менять);
- Положить на него текущий фон, сделать его не прозрачным (если пользователь начинает прокручивать колесиком мыши или тыкая на скроллбар, то придется перехватывать и прокручивать также картинку на этом диве);
- Заменить фоновую картинку в родительском элементе, а дальше по таймеру делать фиктивный див постепенно прозрачным (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 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации:
- Как поменять ник в css v91
- Как поменять цвет ссылки css
- Как понизить пинг в css
- Как поставить картинку в центре css