Как затемнить фотографию css
Перейти к содержимому

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

  • автор:

Фоновое изображение

Утилиты для управления фоновым изображением элемента.

Чтобы придать элементу фон с линейным градиентом, используйте одну из утилит bg-gradient- в сочетании с утилитами остановки градиентного цвета.

div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500">div> div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500">div> div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500">div> div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500">div>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : bg-gradient-to-r , чтобы применять утилиту bg-gradient-to-r только при hover .

div class="bg-gradient-to-l hover:bg-gradient-to-r"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: bg-gradient-to-r , чтобы применить утилиту bg-gradient-to-r только на экранах среднего размера и выше.

div class="bg-gradient-to-l md:bg-gradient-to-r"> div> 

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

Вы можете добавить свои собственные фоновые изображения, отредактировав раздел theme.backgroundImage вашего файла tailwind.config.js :

tailwind.config.js

module.exports =   theme:   extend:   backgroundImage:   'hero-pattern': "url('/img/hero-pattern.svg')",  'footer-texture': "url('/img/footer-texture.png')",  >  >  >  > 

Это не обязательно должны быть градиенты — это могут быть любые фоновые изображения, которые вам нужны.

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Если вам нужно использовать одноразовое background-image value , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

div class="bg-[url('/img/hero-pattern.svg')]"> div> 

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

Copyright © 2023 Tailwind Labs Inc.

Затемнение изображения с помощью CSS (В любой форме)

Так что я видел несколько способов затемнения изображений с помощью CSS, включая изображения с закругленными углами, но моя проблема отличается. Допустим, у меня есть изображение.png, которое выглядит как собака (просто пойдите с ним, у меня нет хороших примеров), когда я размещаю его на своей странице, я даю ему размеры 100 x 100. Но я не могу просто наложить на него что-то или накрасить все изображение, так как это также приведет к тому, что фон собаки будет накрашен, что выглядит некрасиво. Можно ли накрасить изображение произвольной формы с помощью CSS? (Я предполагаю, что вы понимаете мою точку зрения, и бесполезный код не нужен) Спасибо! css png tint

Поделиться Источник 02 апреля 2013 в 13:36

5 ответов

Просто как
Поделиться 10 декабря 2016 в 14:55

Вы всегда можете изменить непрозрачность изображения, учитывая сложность любых альтернатив, это может быть лучшим подходом. CSS:

.tinted

Если вас интересует лучшая совместимость с браузером, я предлагаю прочитать это: http://css-tricks.com/css-transparency-settings-for-all-broswers/ Если вы достаточно убеждены, вы можете заставить это работать так же, как и в IE7 (кто знал!) Примечание: Как указал ниже JGonzalezD, это фактически затемняет изображение только в том случае, если цвет фона обычно темнее, чем само изображение. Хотя эта техника все еще может быть полезна, если вы не хотите конкретно затемнять изображение, но вместо этого хотите выделить его при hover/focus/другом состоянии по какой-либо причине.

Поделиться 02 апреля 2013 в 13:54

Если вы хотите, чтобы только background-image был затронут, вы можете использовать линейный градиент для этого, вот так:

 background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL); 

Если вы хотите, чтобы оно было темнее, сделайте значение alpha выше, в противном случае вы хотите, чтобы оно было светлее, сделайте alpha ниже

Поделиться 30 июля 2019 в 13:18

Я бы сделал новое изображение силуэта собаки (черным), а остальное — таким же, как и исходное изображение. В html добавьте обертку с этим силуэтом в качестве фона. Теперь сделайте исходное изображение полупрозрачным. Собака станет темнее, а фон собаки останется тем же. Вы можете сделать :hover трюки, установив непрозрачность исходного изображения на 100% при наведении. Тогда собака выскакивает, когда вы нажимаете на него! стиль

.wrapper .original .original:hover
Поделиться 09 мая 2014 в 15:30

  • Очевидно, это работает только в браузерах Webkit
  • Требует дополнительной обертки для применения элемента psuedo :after (теги IMG не могут иметь :before / :after псевдоэлементов, grr)
  • Поскольку есть дополнительная обертка, я не уверен, как использовать функцию attr(. ) CSS для получения URL тега IMG , поэтому она жестко закодирована в CSS отдельно.

Если вы можете заглянуть в эти проблемы, это может быть возможным решением. Фильтры SVG будут еще более гибкими, а решения на Холсте будут еще более гибкими и будут иметь более широкий диапазон поддержки (SVG не поддерживает Android 2.x).

Как сделать затемнение картинки с отступами и текстом

Author24 — интернет-сервис помощи студентам

Как реализовать затемнение с текстом на блоке
Код товара вот такой <div .

Как сделать постепенное затемнение картинки в PictureBox
Привет всем вопрос такой как сделать чтоб какринка в PictureBox. меняла якость в зависемости от.

Как сделать затемнение диалога
Как сделать затемнение выводимого диалогов, что бы при каждом вводе числа экран диалога становился.

Затемнение картинки
Помогите, пожалуйста, с затемнением картинки.. . Мой вариант почему-то не работает <div.

Эксперт JSЭксперт HTML/CSS

2631 / 1711 / 744
Регистрация: 13.03.2010
Сообщений: 5,737
Какие сложности возникли в реализации? Или даже не пытались?
Регистрация: 12.11.2019
Сообщений: 13

gogolik, пытался,возникли сложности с тем что весь блок затемняется,куда нужна задавать отступы чтобы затемнение было изнутри?
Вот html,css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
div class="page-4"> div class="page-photo-4"> img class="photo-4"src="/img/page-4-1.png" alt=""> div class="block-front">span class="span-4">Any text/span>/div> /div> div class="page-photo-4"> img class="photo-4"src="/img/page-4-2.png" alt=""> div class="block-front">span class="span-4">Any text/span>/div> /div> div class="page-photo-4"> img class="photo-4"src="/img/page-4-3.png" alt=""> div class="block-front">span class="span-4">Any text/span>/div> /div> div class="page-photo-4"> img class="photo-4"src="/img/page-4-4.png" alt=""> div class="block-front">span class="span-4">Any text/span>/div> /div> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
.page-4{ height: 1330px; background-color: black; } .page-photo-4{ background: #737373; float: left; position: relative; width: 25%; padding-bottom: 350px; } .page-photo-4:hover { background: black; } .photo-4{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .photo-4:hover{ background-color: #000000; opacity: 0.8; }

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

Затемнение изображения на PHP

Затемнение изображения на PHP

Очередной кусочек кода для работы с изображениями на PHP. Сегодня это будет затемнение. Кроме изменения яркости всего изображения, этот эффект можно применять для автоматического создания презентационных изображений или портфолио. Например, можно затемнить часть изображения, а затем наложить на него какой-нибудь текст.

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

  1. // Коэффициент затемнения [0..256] от темного к светлому
  2. $darkness = 150 ;
  3. // Файл исходного изображения
  4. $file = ‘image.jpg’ ;
  5. $im = ImageCreateFromJPEG ( $file );
  6. list( $width , $height )= GetImageSize ( $file );
  7. for ( $y = 0 ; $y < $height ; $y ++)
  8. for ( $x = 0 ; $x < $width ; $x ++)
  9. $RGB = ImageColorAt ( $im , $x , $y );
  10. // Затемнить каждую точку изображения
  11. $R = intval ((( $RGB >> 16 ) & 0xFF )* $darkness / 256 );
  12. $G = intval ((( $RGB >> 8 ) & 0xFF )* $darkness / 256 );
  13. $B = intval (( $RGB & 0xFF )* $darkness / 256 );
  14. $color = ImageColorAllocate ( $im , $R , $G , $B );
  15. ImageSetPixel ( $im , $x , $y , $color );
  16. >
  17. >
  18. // Отправить изображение в браузер
  19. Header ( ‘Content-type: image/jpeg’ );
  20. ImageJPEG ( $im , NULL , 100 );
  21. ImageDestroy ( $im );

Если динамически менять коэффициент затемнения, то можно получить красивый градиентный переход. Вот так это выглядит на реальном примере. Для большего эффекта я сделал изображение с несколькими надписями.

Затемнение изображения на PHP

Затемнение изображения на PHP

Это не графический редактор, все сгенерировано скриптом в автоматическом режиме.

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

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