html背景区块投影,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. 参考链接