HTML直接在<style>内对背景图片做渐变颜色遮罩【滤镜】

under Website  Notes of Programming  tag javascript  html  css    Published on April 29th , 2020 at 05:33 pm

首先,这是一只普通的DIV设置了其背景:

test
<div class="DivTest" style="
    text-align: center;
    padding: 1em;
    background:
    url(/i/usr/themes/arcadia/assets/css/haitang.jpg)
    no-repeat 0% 70%/ cover;
    color: white;
">
test
</div>

然后给它加一层渐变滤镜

test
<div class="DivTest" style="
    text-align: center;
    padding: 1em;
    background: linear-gradient(#65c294, #65c29480),
    url(/i/usr/themes/arcadia/assets/css/haitang.jpg)
    no-repeat 0% 70%/ cover;
    color: white;
    background-color: #65c294;
">
test
</div>

已知BUG: 手机QQ内浏览器无法正常显示,初步排查原因是其不支持透明色

临时应对办法:在第八行写上background-color: #65c294;,避免不支持渐变色而导致背景为白色而不到文字。


核心方法来自
有没有办法给 background-image 设置透明度? - 的回答 - SegmentFault 思否exia 的解答


本文由 matcha 创作,采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
  文章最后更新时间为:April 29th , 2020 at 10:16 am
分享到:Twitter  Weibo  Facebook