CSS background（背景图片）详解

“在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。”

css怎样设置背景图片?

css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。

background-image

定义和用法

• background-image 属性为元素设置背景图像。
• 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
• 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
• url(‘URL’)：指向图像的路径。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

background-color

定义和用法

• background-color 属性设置元素的背景颜色

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

transparent 值

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

background-position

• background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”

可能的值

background-size

• background-size属性指定背景图片大小。

可能的值

background-repeat

• background-repeat 属性设置是否及如何重复背景图像。
• 默认地，背景图像在水平和垂直方向上重复。

详细说明
background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

可能的值

background-attachment

• background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

可能的值

background-clip

• background-clip属性指定背景绘制区域。

可能的值

background-origin

• background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

backface-visibility

• backface-visibility 属性定义当元素不面向屏幕时是否可见
• 如果在旋转元素不希望看到其背面时，该属性很有用。

background-blend-mode

• ackground-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

可能的值

• normal 默认值。设置正常的混合模式。
• multiply 正片叠底模式。
• screen 滤色模式。
• overlay 叠加模式。
• darken 变暗模式。
• lighten 变亮模式。
• color-dodge 颜色减淡模式。
• saturation 饱和度模式。
• color 颜色模式。
• luminosity 亮度模式。

语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;