CSS实现：background 渐变色+图片（含案例、代码、截图）

• background实现背景：渐变色+图片（含案例、代码、截图）

---

效果截图示下：

• 演示效果，截图示下：
  

---

代码如下：

1. 单独设置：简单的背景色渐变

• 简单的背景色渐变

  /* background: linear-gradient(to left,$base,$assist-clor); */
  background: linear-gradient(to left, #fe3b0f, #ff4e17)
  

  

2. 混合搭配设置：多背景色渐变+多图片

• 正确使用#色值，代码示下：

  /*大背景图区域*/
  .bg1{
  	background: url(static/images/tabs-style2/wyc-bg.png) no-repeat center center, linear-gradient(105deg, #F8FCFF 0%, #C4CBD5 100%);
  	background-size: auto 100%;
  }
  

• 正确使用rgba()，代码示下：

  /*大背景图区域*/
  .bg1{
  	background: url(static/images/tabs-style2/wyc-bg.png) no-repeat center center, linear-gradient(90deg,rgba(248,252,255,1) 0%, rgba(196,203,213,1) 100%);
  	background-size: auto 100%;
  }
  

错误写法，导致背景显示空白！【正常是：背景图片设置在前，渐变色设置在后】

/*错误写法：*/
background: linear-gradient(to right, #F8FCFF, #C9D0D8), url(static/images/tabs-style2/wyc-bg.png) >no-repeat center center;

---

使用说明：

1. 多背景设置：请使用英文,并列设置即可。
2. 渐变色种类、渐变%百分比，渐变角度、渐变方向，均可按css属性进行自定义代码设置；

---

其他文章推荐：

• CSS文字颜色渐变 - 案例篇

---

以上就是关于“CSS实现：background 渐变色+图片（含案例、代码、截图）”的全部内容。