CSS设置背景和渐变色

1. 添加背景色纯色背景：用background-color渐变背景：用line-gradient，也可以一次用多个div {background-color: red;}div {/* 单个渐变背景 */background: linear-gradient(to bottom, red, green);background: linear-gradient(to bottom, red, gr

时光足迹

9339人浏览 · 2021-08-04 11:34:26

时光足迹 · 2021-08-04 11:34:26 发布

1. 添加背景色

纯色背景：用background-color
渐变背景：用line-gradient，也可以一次用多个

div {
  background-color: red;
}

div {
  /* 单个渐变背景 */
  background: linear-gradient(to bottom, red, green);

  background: linear-gradient(to bottom, red, green 20%, orange 80%, blue);
  /* 多个渐变背景 */
  background: 
        linear-gradient(to bottom, cyan, transparent),
    linear-gradient(225deg, magenta, transparent),
    linear-gradient(45deg, yellow, transparent);
}

效果如下：
请添加图片描述

2. 添加背景图

background属性官网介绍：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

图片背景：可以合在一起background；也可以单独写每个属性，例如background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment等

渐变背景：linear-gradient

div {
  /* 将背景设为一张居中放大的图片 */
  background: no-repeat center/50% url("../images/icon_test.png");
}
div {
  background-image: linear-gradient(to bottom, red, green 20%, orange 80%, blue);
  background-image: 
        linear-gradient(to bottom, cyan, transparent),
    linear-gradient(225deg, magenta, transparent),
    linear-gradient(45deg, yellow, transparent);
}

效果：
请添加图片描述

3.添加背景图和背景色混合

div {
  /* 中间是图片，四周是背景色 */
  background: url("../images/icon_test.png") center/50% no-repeat, linear-gradient(to bottom, red, green);
  /* 上部分是图片，后面是渐变背景色 */
  background: url("../images/icon_test.png") 0 0 no-repeat, linear-gradient(to right bottom,  red 200px, green);
}

// 我的代码
div {
  background: url('../images/icon_bg.png') 0 0 no-repeat, linear-gradient(to bottom, #FCFDFD, #FCFDFD);
  // background: #FCFDFD url('../images/icon_bg.png') 0 0 no-repeat;
  background-size: 100%;
}