mkimq

背景处理

背景样式

背景颜色

背景颜色可以使用[rga | rgba | 十六进制]等颜色格式

background-color: red;

背景图片

可以使用[png| gif |jpeg]等图片做为背景使用

background-image: url('logo.png');

背景裁切

选项说明
border-box包括边框
padding-box不含边框，包括内边距
content-box内容区域
background-clip: border-box;

背景重复

选项说明
repeat水平、垂直重复
repeat-x水平重复
repeat-y垂直重复
no-repeat不重复
space背景图片对称均匀分布
background-repeat: repeat-y;

背景滚动

用于设置在页面滚动时的图片处理方式

选项说明
scroll背景滚动
fixed背景固定

背景位置

用于设置背景图片的水平、垂直定位。

选项说明
left左对齐
right右对齐
center居中对齐
top顶端对齐
bottom底部对齐
/* 居中 */
background-position: center;
/* 或则 */
background-position: 50% 50%;

背景尺寸

选项说明
cover背景完全覆盖，可能会有背景溢出
contain图片不溢出的放在容器中，可能会漏出部分区域
background-size: 50% 100%;
/* 或则 */
background-size: 200px 200px;

多个背景

background-image: url('small.png'), url('bg.png');

组合设置

background: red url('small.png') no-repeat right 50% fixed;

盒子阴影

box-shadow 对盒子元素设置阴影，参数为：水平偏移，垂直偏移，模糊度，颜色 构成。

颜色渐变

线性渐变

  1. 渐变一般用在背景颜色中使用
background: linear-gradient(red, green);
  1. 渐变角度
background: linear-gradient(30deg, red, green);
  1. 向右渐变
background: linear-gradient(to right, red, green)
  1. 向左渐变
background: linear-gradient(to left, red, green);
  1. 左上渐变
background: linear-gradient(to top left, red, green);
  1. 右下渐变
background: linear-gradient(to right bottom, red, green);
  1. 设置多个颜色
background: linear-gradient(red, rgb(0, 0, 200), green, rgba(122, 211, 100, 0));

径向渐变

  1. 设置渐变
background: radial-gradient(red, blue, green);
  1. 设置渐变宽度与高度
background: radial-gradient(100px 200px, red, blue, green);
  1. 左下渐变
background: radial-gradient(at bottom left, red, blue);
  1. 右下渐变
background: radial-gradient(at bottom right, red, blue);
  1. 左侧向中心渐变
background: radial-gradient(at center left, red, blue);
  1. 底部向中心渐变
background: radial-gradient(at 50% 100%, red, blue);

标识位

颜色未指定标识时，颜色会平均分布。

红色与蓝色在50% 60%间发生激变。

background: linear-gradient(45deg, red 50%, blue 0%);

标识位相同时将没有过渡效果

background: linear-gradient(45deg, red 0,red 50%, blue 50%);

径向标识位绘制小太阳

width: 150px;
height: 150px;
background: radial-gradient(red 0, yellow 30%, black 60%, black 100%);

通过在两个颜色间中间点定义过渡位置

background: linear-gradient(45deg, red, 50%, blue);

渐变重复

下例定义从0到25为蓝色，25px到50px的红色，并进行重复后产生渐变的进度条。

background: repeating-linear-gradient(90deg, blue, 25px, yellow 25px, 25px, red 50px);

径向重复

width: 200px;
height: 200px;
background: repeating-radial-gradient(100px 100px, red 0%, yellow 40%, black 60%, black 200%);
贡献者: mankueng