How to apply a gradient to an img tag?

Question

css

Hello. Please tell me, is it possible to impose a gradient on This option does not suit

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

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

It is necessary that the gradient work without using a div . Thanks in advance.
<img src="тут картинка">

Answer 1

Thanks everyone for the replies. Found a solution:

$(
      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

Unfortunately, :before and :after do not apply to img.
But you can do this: jsfiddle.net/Stalk/4uvgu3sh

Answer 3

Is it like this or through 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;
}

Only on css, as far as I know, it will not work.

Answer 4

And through a pseudo-class and absolute positioning will do?

Answer 5

Well, I can offer not the best option, rather even stupid.
put a layer with png (gradient with a transparent background) on top of the layer of this image.
CSS z-index and all.
a picture with a gradient of the width you need and a height of 1 pixel.
You repeat it along the y-axis.

Answer 6

Guys, what are you doing here, a person asked a question, can I apply a gradient to the img tag?
You can't do that with CSS, because ::after, ::before pseudo-classes don't work.