• 技术文章 >web前端 >css教程

    css背景图片颜色怎么设置

    青灯夜游青灯夜游2021-07-22 14:57:10原创257

    css中,可以利用background和background-blend-mode属性来设置背景图片颜色,语法格式“background: url(背景图片路径), 颜色值;background-blend-mode: lighten;”。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    利用background-blend-mode

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    .icon1 {
    width: 180px;
    height: 180px;
    background: url(img/1.jpg);
    background-size: cover;
    }
    .icon2 {
    width: 180px;
    height: 180px;
    background: url(img/1.jpg), linear-gradient(#f00, #c10);
    /* background: url(img/1.jpg),red; */
    background-blend-mode: lighten;
    background-size: cover;
    }
    </style>
    </head>
    <body>
    <div>原图:</div><br />
    <div></div>
    </body>
    </html>

    效果图:

    1.png

    说明:

    lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式 。

    linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。

    (学习视频分享:css视频教程

    以上就是css背景图片颜色怎么设置的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 背景图片颜色
    上一篇:怎么加载css文件 下一篇:css怎么实现心形
    线上培训班

    相关文章推荐

    • 8个值得了解的纯CSS布局排版技巧• 深入了解CSS中的选择器• css怎么实现多边形• css怎么设置标签属性• js怎么替换css样式• css写法怎么优化

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网