Css学习: background 常见写法

css基础知识学习
更新于: 2023-09-09 09:16:16

cheatsheet

常见内容速查。

用法代码
只设置背景颜色
background-color: red;
只设置背景图像
/* 最好不要引号 */
background-image: url('example.jpg');
同时设置背景颜色和背景图像:
background: red url('example.jpg');
设置背景重复方式
background-repeat: repeat-x;
设置背景位置
background-position: center top;
设置背景大小
background-size: cover;
背景被裁剪为文字的前景色
background-clip: text;
控制背景图像在元素内滚动时的行为
.background-example {
  background-image: url('background.jpg');
  background-size: cover;
  background-attachment: fixed;
}
组合
background: red url('example.jpg') center top / cover no-repeat fixed;
多背景，组合
background: 
  linear-gradient(to right, #ff5733, #ffcc33),  /* 第一个背景：橙色线性渐变 */
  url('pattern.png') repeat,                    /* 第二个背景：平铺的图像 */
  radial-gradient(circle, #3399ff, #3366ff);    /* 第三个背景：蓝色径向渐变 */

多背景

在上面的示例中，我们为一个元素定义了三个不同的背景：

  • 第一个背景是一个橙色线性渐变，从左到右渐变从 #ff5733 到 #ffcc33。这个背景将首先显示在元素的背景上。
  • 第二个背景是一个名为 "pattern.png" 的图像，它被重复平铺在元素的背景上。这个背景将在第一个背景之上显示。
  • 第三个背景是一个蓝色径向渐变，以 circle 形状从中心向外渐变从 #3399ff 到 #3366ff。这个背景将在前两个背景之上显示。

通过这种方式，你可以为元素创建复杂的多层背景效果，每个背景都可以具有不同的属性，例如渐变、图像、重复方式和位置。

 

参考