Как наложить градиент на картинку в css
Перейти к содержимому

Как наложить градиент на картинку в css

  • автор:

Как сделать градиент поверх картинки?

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

.header < height: 670px; width: 100%; background-image: url(../img/header_bg.png); background: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%); >

Отслеживать
22.4k 11 11 золотых знаков 59 59 серебряных знаков 121 121 бронзовый знак
задан 14 окт 2016 в 13:44
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 13 13 бронзовых знаков

2 ответа 2

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

linear-gradient — это изображение, поэтому изображения (фон и градиент) надо прописывать через запятую

.header < height: 670px; width: 100%; background-image: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%), url(../img/header_bg.png); >

Далее, если я правильно понял про вопрос суть с текстом, то:

Создаете блок и присваиваете ему такой класс, заполняя текстом, пример:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris enim enim, semper sed libero placerat, venenatis eleifend velit. Aliquam imperdiet nunc in libero condimentum viverra. Quisque eu est et mauris pellentesque vulputate. Curabitur posuere sollicitudin urna id malesuada. Vivamus tincidunt tristique diam, id porttitor neque tempor at. Quisque eget enim in tortor scelerisque vehicula vel eget justo. Nunc rutrum iaculis tortor at porttitor.

Градиент поверх картинки?

Дана картинка и градиент, нужно наложить градиент поверх картинки, как это сделать?

  • Вопрос задан более двух лет назад
  • 810 просмотров

Комментировать

Решения вопроса 1

помогло? отметь решением!

Блок в размер картинки, у которого два фона — картинка и градиент https://developer.mozilla.org/en-US/docs/Web/CSS/C.
ну или псевдоблок :after над картинкой с абсолютным позиционированием и фоном с градиентом.

Ответ написан более двух лет назад

Комментировать

Нравится 2 Комментировать

Наложение градиента на изображение в HTML при помощи CSS

Наложение градиента на изображение в HTML при помощи CSS

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

Я не буду вдаваться в большие подробности и сразу представлю код наложения градиента на изображение при помощи CSS.

Результат код на изображении ниже.

Обратите внимание, что изображение накладывается в видео фона (background-image). Выше представлен сокращенный код. Я сразу прописал необходимые спецификации для свойства background.

Итак, у нас имеется контейнер с шириной 640 точек и высотой 480 точек. Мы подгружаем в него изображение, помещаем его в центре и подгоняем под размеры контейнера. Так мы не сильно зависим от размера изображения и можем сделать контейнер адаптивным (если укажем ширину 100%).

linear-gradient(180deg, rgb(20 47 88 / 0%) 0%, #143458 100%

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

Рассмотрим изменение градиента CSS при помощи Google Chrome.

Итак, наводим на наше изображение с градиентом и нажимаем правой кнопкой мыши.

В контекстном меню выбираем «Просмотреть код».

В появившейся панели справа мы видим CSS код с параметрами вставки изображения.

Наш градиент построен таким образом, чтобы идти он прозрачного к полному затемнению синим цветом.

Для изменения основного цвета нужно нажать кнопкой мыши на темно-синий квадрат, как указано на рисунке.

После появится панель цвета.

Здесь, передвигая ползунки, вы можете поменять цвет, например, на темно-зеленый. В итоге наше изображение в целом измениться.

Здесь также можно перемещать нижний ползунок, он отвечает за прозрачность и установлен по умолчанию на 100%.

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

В этом случае цвет установлен на полную прозрачность.

Также здесь вы можете изменить угол градиента. Со 180 градусов (вертикального) можно установить любой другой угол.

Например, изменение этого параметра на 90 приведет к тому, что мы получим не вертикальный, а горизонтальный градиент CSS.

После того как вы перекрасите и повернете заливку так как вам необходимо, вы должны аккуратно скопировать CSS код из панели редактирования и вставить в свой HTML файл. И все, все изменения будут применены.

Важно! Во время редактирования CSS не обновляете старицу HTML, иначе все ваши изменения будут сброшены и придётся все проделывать заново.

Как наложить градиент на тег img?

Именно надо, чтобы градиент работал без использования дива

Заранее спасибо.

  • Вопрос задан более трёх лет назад
  • 2059 просмотров

1 комментарий

Оценить 1 комментарий

riot26

сталкивался с такой проблемой в своём pet-project. подпишусь. дайте знать, если будет решение 🙂
Решения вопроса 1
Dextersis @Dextersis Автор вопроса

Спасибо всем за ответы. Нашел решение:

$( function() < // Get all of the gradient images and loop // over them using jQuery implicit iteration. $( "img.gradient" ).each( function( intIndex )< var jImg = $( this ); var jParent = null; var jDiv = null; var intStep = 0; // Get the parent jParent = jImg.parent(); // Make sure the parent is position // relatively so that the graident steps // can be positioned absolutely within it. jParent .css( "position", "relative" ) .width( jImg.width() ) .height( jImg.height() ) ; // Create the gradient elements. Here, we // are hard-coding the number of steps, // but this could be abstracted out. for ( intStep = 0 ; intStep ) .width( jImg.width() ) .height( 5 ) ; // Add the fade level to the // containing parent. jParent.append( jDiv ); > > ); > );

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 5
Stalker_RED @Stalker_RED
К сожалению к img не применяются :before и :after
Но можно так: jsfiddle.net/Stalk/4uvgu3sh
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Dextersis @Dextersis Автор вопроса
Спасибо, но не подходит
Stalker_RED @Stalker_RED
Dextersis: Или обертка или никак.
Sr. front-end developer

Разве что так или через js:

.img-with-gradient < background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 59%, rgba(0, 0, 0, 0.5) 100%), url('http://lorempixel.com/400/400/') no-repeat; width: 400px; height: 400px; >

Только на css, насколько я знаю, реализовать никак не получится.

Ответ написан более трёх лет назад
Dextersis @Dextersis Автор вопроса
Спасибо, но не то, а как через js бы реализовать?
Dextersis: Попробуйте посмотреть в сторону библиотеки:
https://github.com/awgreenblatt/gradientmaps
Дмитрий @Darth_Solo
Падаван области Фронт-энда.
А через псевдокласс и абсолютное позиционирование подойдет?
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

web1

Ну могу предложить не самый лучший вариант, скорее даже глупый.
наложить слой с пнг (градиент с прозрачным фоном) поверх слоя этой картинки.

CSS z-index и все.
картинка с градиентом нужной тебе ширины высотой в 1 пиксель.
Повторяешь его по оси игрек.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Михаил Чирский @chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт

Ребята, что вы тут развели, человек задал вопрос, можно наложить градиент на тег img?
На CSS нельзя так сделать, т.к псевдоклассы ::after, ::before не работают.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как с помощью css добиться такое поведение блоков?

  • 1 подписчик
  • 19 минут назад
  • 27 просмотров

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

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