首页 文章

将图像渐变为透明渐变

提问于
浏览
33

我希望有一个图像(背景图像)淡入透明,以便实际可以看到它背后的内容(由于透明度,几乎没有) .

我可以通过PNG图像显然实现它,但我需要让我的平面设计师每次想要更改开始时更改图像=>停止透明点(也许我想要更多颜色或者我想要更少的颜色和更多透明度) .

我有没有机会用CSS3达到同样的效果?我尝试在jpg(和png)上应用渐变透明但我无法看透它,除非PNG已经完成透明度(基本上是渐变)(这使得css渐变无用) .

有什么建议吗?我正在通过网络挖掘,但似乎我没有使用正确的关键字,也许这是不可能的 .

Update 1:

代码说的不止是很多单词,我想做这样的事情(但语法显然是错误的):

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

2 回答

  • 20

    如果你想要这个:

    enter image description here

    你可以这样做:

    <html>
      <style type='text/css'>
        div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
        img {
          -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
        }
      </style>
      <body>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
        <img src='https://i.imgur.com/sLa5gg2.jpg' />
      </body>
    </html>
    
  • 45

    如果您只想淡入背景颜色(白色,在这种情况下),请参阅此处的工作示例:

    http://jsfiddle.net/yw9v7zm5/

    .css用于图像容器div使用:

    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    

相关问题