CSS 背景图片和渐变色背景并存

鱼钓猫的小鱼干

已于 2024-02-29 14:33:22 修改

阅读量311

点赞数 3

分类专栏：知识储备文章标签： css 前端

于 2024-02-28 17:37:43 首次发布

本文链接：https://blog.csdn.net/weixin_62234646/article/details/136351410

版权

知识储备专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了CSS中linear-gradient()函数与url()背景图片的正确使用方法，强调了它们之间的逗号分隔以及linear-gradient在url()之后的重要性。同时提到了edge/Chrome浏览器对png、jpg和jpeg格式的支持情况，以及兼容性的注意事项。

摘要由CSDN通过智能技术生成

先上效果图。
在这里插入图片描述

样式：

.board {
  width: 414px;
  height: 210px;
  padding: 12px 16px;
  background: url(../../../../assets/images/process/01.jpg) right bottom
      no-repeat,
    linear-gradient(135deg, #fff1eb, #ffe4e0);
  background-size: auto 50%;
  border-radius: 4px;
  &:nth-child(2) {
    background: url(../../../../assets/images/process/bgpic_money.png) right
        bottom no-repeat,
      linear-gradient(135deg, #e9f3ff, #c5dcff);
  }
  &:nth-child(3) {
    background: url(../../../../assets/images/process/bgpic_money.png) right
        bottom no-repeat,
      linear-gradient(135deg, #fff6f1, #ffddc5);
  }
  &:nth-child(4) {
    background: url(../../../../assets/images/process/bgpic_money.png) right
        bottom no-repeat,
      linear-gradient(135deg, #fbf8fd, #f1e6fa);
  }