css——样式化区块——背景

元素的背景：在元素内容、内边距和边界下层的区域。

1. 改变背景所占区

在新的浏览器中，你可以使用 background-clip属性改变背景所占用的区域

background-clip: border-box     背景延伸到边框外沿（但是在边框之下）。
background-clip: padding-box    边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box    背景裁剪到内容区 (content-box) 外沿。
background-clip: inherit        背景被裁剪为文字的前景色(只有chrome支持)。
复制代码

2. 常用背景属性

background-color: 为背景设置一个纯色。
background-image: 指定在元素的背景中出现的背景图像。这可以是静态文件，也可以是生成的渐变。
background-repeat: 指定背景是否应该被重复(平铺)。
background-position:指定背景应该出现在元素背景中的位置。
background-attachment: 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?
background: 在一行中指定以上五个属性的缩写。
background-size: 允许动态调整背景图像的大小。

2.1 background-color 背景颜色

注意：大多数元素的默认背景颜色不是white (白色) 而是transparent（透明），另外，设置背景颜色作为后备也是很重要的。
语法：background-color: 颜色名|十六进制色|RGB 颜色|RGBA 颜色|HSL 颜色HSLA 颜色|预定义/跨浏览器颜色名；
举例：

颜色名                     background-color:white;
十六进制颜色                background-color:#0000ff;
RGB 颜色                   background-color:rgb(255,0,0);
RGBA 颜色                  background-color:rgba(255,0,0,0.5);
HSL 颜色                   background-color:hsl(120,65%,75%);
HSLA 颜色                  background-color:hsla(120,65%,75%,0.3);
复制代码

2.2 background-image 背景图像

background-image通常配合 background-repeat 使用
举例：

background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);    引入图片
background-image: linear-gradient(to bottom, orange, yellow);                          颜色渐变
复制代码

注意：由于背景图像是使用CSS设置的，并且出现在内容的背景中，它们将会在屏幕阅读器之类的辅助技术中不可见。它们不是内容图片，只是为了装饰，如果你想在你的页面上包含一个图片，这是内容的一部分，那么你应该用元素来做。

2.3 background-repeat 背景重复

background-repeat: no-repeat: 图像将不会重复:它只会显示一次。
background-repeat: repeat-x: 图像将在整个背景中水平地重复。
background-repeat: repeat-y: 图像会在背景下垂直地重复。
复制代码

2.4 background-position 背景位置

该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形，x坐标从左到右，y坐标从上到下。
该属性可以接受许多不同的值类型(x和y的位置上可以用不同值类型)，最常用的是：

background-position: 200px 25px        px 绝对值
background-position: 20rem 2.5rem      rem 相对值
background-position: 90% 25%           百分比 
background-position: right center.     关键字 （left，center，right和 top，center，bottom）
复制代码

2.5 background-attachment背景附着

background-attachment:scroll|fixed|local;
scroll: 这将把背景修改为页面视图，因此它将在页面滚动时滚动。
fixed: 不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。
local:当滚动元素时，背景会随之滚动。
复制代码

2.6 background 背景简写

background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size,background-attachment。 举例：

body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}
复制代码

2.7 多个背景

将多个背景连接到单个元素。
举例：

简写形式
div {
background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
}
单属性形式
background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;
复制代码

2.8 背景尺寸

动态地改变背景图像的大小。
举例：

background-image: url(myimage.png);

background-size: 16px 16px;  /* 改变x和y的px值可进行缩放方法和拉伸,另外，尺寸可以是其他任意单位rem、百分比、关键字*/
background-size: contain;   /*特殊值，不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/
background-size: contain;   /* 特殊值，指定背景图可以被调整到任意大小，以使背景图完全覆盖背景区域。*/
复制代码

3. 参考链接

• https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/%E8%83%8C%E6%99%AF
• https://css-tricks.com/almanac/properties/b/background/
• http://www.w3school.com.cn/cssref/css_colors_legal.asp

转载于:https://juejin.im/post/5aea62316fb9a07aab29ad36