背景效果：CSS背景属性用法示例

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

CSS的背景属性如下：

1. 背景颜色
2. 背景图片
3. 重复背景
4. 背景附加
5. 背景位置

背景颜色 ：

此属性指定元素的背景色。

句法 ：

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 >

输出如下：

---