The partial gradient of <img>


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
11 views
There is a picture, tag
image

How CSS/JS to achieve this effect without editing the image itself?

image
by | 11 views

4 Answers

0 like 0 dislike
Well, you can't offer the best option, rather stupid.
to impose a layer with APG (gradient with a transparent background) on top of a layer of this picture.
\r
CSS z-index and all.
the picture with the gradient you need the width by the height to 1 pixel.
Repeat it on the y axis.
by
0 like 0 dislike
You can create a translucent PNG with the gradient (or a range of files) and overlay on top of the marked desired class of images means JS when the page loads.
by
0 like 0 dislike
here somehow so
\r
\r
qq\r\r\r
\r
#image{ width: 159px; height: 110px; position:relative; } .overlayed{ display:block; position:absolute; top:0; left:0; width: 100%; height:100%; background: #FFF; background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* firefox */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF',GradientType=0 ); /* ie */ } 
by
0 like 0 dislike
When using CSS, you can use the mask property in a pair of SVG. Examples and descriptions: developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content
by

Related questions

0 like 0 dislike
3 answers
asked May 22, 2019 by Maxymus1996
0 like 0 dislike
4 answers
0 like 0 dislike
1 answer
asked Mar 24, 2019 by GearHead
0 like 0 dislike
5 answers
asked Mar 21, 2019 by sedictor
110,608 questions
257,186 answers
0 comments
27,943 users