css 背景图片和背景色渐变同时存在

hibiscusxin

已于 2022-06-28 14:35:38 修改

阅读量2.7k

点赞数 3

分类专栏： CSS 文章标签： css css3 html

于 2022-06-02 14:00:30 首次发布

本文链接：https://blog.csdn.net/qq_41838435/article/details/125099539

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css 背景图片和背景色渐变同时存在

1、垂直渐变

效果图：
在这里插入图片描述

.wrapper {
    width:500px;
    height: 500px;
    background: url(./imabg.png) no-repeat bottom / contain, linear-gradient(#333 0%, #fff 100%);
    background-size: 50%;
}

2、横向渐变

在这里插入图片描述

.wrapper {
    width:500px;
    height: 500px;
    background: url(./imabg.png) no-repeat bottom / 50%, linear-gradient(to right, #02b0b0, #03ceac);
}