当前位置: 首页>前端>正文

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

先上效果图。
CSS 背景图片和渐变色背景并存,在这里插入图片描述,第1张

样式:

.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);
  }

大概就是这些了,有问题欢迎反馈!


https://www.xamrdz.com/web/27h1849003.html

相关文章: