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

Question

[Dextersis]

Здравствуйте. Скажите пожалуйста, возможно ли наложить градиент на

<img src="тут картинка">

Такой вариант не устраивает

<div class="имя класса"
  <img src="тут картинка">
</div>

Именно надо, чтобы градиент работал без использования дива
<img src="тут картинка">
Заранее спасибо.

Comments

[riot26]

сталкивался с такой проблемой в своём pet-project. подпишусь. дайте знать, если будет решение :)

Answer 1

[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 <= 20 ;
							intStep++
							){

							// Create a fade level.
							jDiv = $( "<div></div>" );

							// Set the properties on the fade level.
							jDiv
								.css (
									{
										backgroundColor: "#FFFFFF",
										opacity: (intStep * 5 / 100),
										bottom: ((100 - (intStep * 5) ) + "px"),
										left: "0px",
										position: "absolute"
									}
									)
								.width( jImg.width() )
								.height( 5 )
							;

							// Add the fade level to the
							// containing parent.
							jParent.append( jDiv );

						}

					}
					);

			}
			);

<img src="" width="545" height="386" alt="" class="gradient"/>

Answer 2

[Stalker_RED]

К сожалению к img не применяются :before и :after
Но можно так: jsfiddle.net/Stalk/4uvgu3sh

Comments

[Dextersis]

Спасибо, но не подходит

[Stalker_RED]

Dextersis: Или обертка или никак.

Answer 3

[Родион Мун]

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

<div class="img-with-gradient"></div>

.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, насколько я знаю, реализовать никак не получится.

Comments

[Dextersis]

Спасибо, но не то, а как через js бы реализовать?

[Родион Мун]

Dextersis: Попробуйте посмотреть в сторону библиотеки:
https://github.com/awgreenblatt/gradientmaps

Answer 4

[Дмитрий]

А через псевдокласс и абсолютное позиционирование подойдет?

Answer 5

[Влад]

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

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

Answer 6

[Михаил Чирский]

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