背景效果（CSS背景属性用法示例）

CSS背景属性用于定义元素的背景效果。
CSS的背景属性如下：

背景颜色
背景图片
重复背景
背景附加
背景位置

背景颜色：
此属性指定元素的背景色。
句法：

body{background-color:color name}

颜色名称也可以指定为："绿色", 十六进制值为"＃5570f0", RGB值为" rgb(25, 255, 2)"。
范例：

< style > h1{ background-color: blue; } < / style > < body > < h1 > lsbin< / h1 > < / body >

输出如下：

背景图片：
此属性指定用作元素背景的图像。默认情况下, 将重复图像, 以使其覆盖整个元素。
语法如下：

body{background-image : link; }

例子：

< style > body{ background-image:url("https://media.lsbin.org/wp-content/cdn-uploads/20190417124305/250.png"); } < / style > < body > < h1 > lsbin< / h1 > < / body >

输出如下：

背景重复：
默认情况下, 背景图像属性会水平和垂直重复图像。
要水平重复图像：
语法如下：

body{background-image:link; background-repeat: repeat:x; }

例子：

< style > body { background-image: url("https://media.lsbin.org/wp-content/cdn-uploads/20190417124305/250.png"); background-repeat: repeat-x; } < / style > < body > < h1 > "Hello world"< / h1 > < / body >

输出如下：

要垂直重复图像：
语法如下：

body{background-image:link; background-repeat: repeat:y; }

例子：

< style > body { background-image: url("https://media.lsbin.org/wp-content/cdn-uploads/20190417124305/250.png"); background-repeat: repeat-y; } < / style > < body > < h1 > "Hello world"< / h1 > < / body >

输出如下：

背景附件：
此属性用于修复背景地面图像。该图像不会随页面滚动。
语法如下：

body{background-attachment: fixed; }

例子：

< style > body{ background-image: url("https://media.lsbin.org/wp-content/cdn-uploads/20190417124305/250.png"); background-attachment:fixed; } < / style > < body > < h1 > lsbin< / h1 > < / body >

输出如下：

背景位置：
此属性用于将图像设置到特定位置。
句法：

body{background-repeat:no repeat; background-position:left top; }

例子：

< style > body{ background-image: url("https://media.lsbin.org/wp-content/cdn-uploads/20190417124305/250.png"); background-repeat:no-repeat; background-position:center; } < / style > < body > < h1 > lsbin< / h1 > < / body >

【背景效果（CSS背景属性用法示例）】输出如下：