Good

Imagine: 1. for the whole background - a picture; 2. For the whole background - gradient

Is it possible to mix it up? Suppose that there was a background image, and on top of it a weak translucent gradient, say from above (255,255,255.0.6), and from the bottom (255.255.255.0.4). So you can do? I tried it myself and write this gradient, and google .. in general, no DIY from me. Can anyone recommend a solution? (Well, if this is possible)

  • Can be made using the shadow, support above. - Vitali

2 answers 2

There is such an option: example It works exactly in IE 10+ and the latest versions of Firefox / Opera / Chrome

<div id="mask"></div> 
 #mask { background: url(demo.png) no-repeat 0 0 transparent; height: 37px; overflow: hidden; position: relative; width: 95px; } #mask::after { background: transparent; background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1))); background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%); background: -o-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%); background: -ms-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%); background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%); content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

demo image

    This is done using an ordinary gradient:

     .img { display: block; width: 200px; height: 200px; background-image: linear-gradient(to bottom, black 0%, transparent 100%), url(http://i.imgur.com/Tpn26TW.jpg); background-size: cover; background-position: center; } 
     <div class="img"></div>

    Article: http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient