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

2021年3月26日17:03:37 发表评论 575 次浏览

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 >

输出如下:

CSS |背景1

背景图片 :

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

语法如下:

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 >

输出如下:

CSS |背景2

背景重复:

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

要水平重复图像:

语法如下:

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 >

输出如下:

CSS |背景3

要垂直重复图像:

语法如下:

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 >

输出如下:

CSS |背景4

背景附件:

此属性用于修复背景地面图像。该图像不会随页面滚动。

语法如下:

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 >

输出如下:

CSS |背景5

背景位置:

此属性用于将图像设置到特定位置。

句法 :

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 |背景6

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: