锐客网

  1. 首页 > 睿知 > it技术 > >

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

前端开发IT知识背景效果

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背景属性用法示例） 背景图片 ：
此属性指定用作元素背景的图像。默认情况下, 将重复图像, 以使其覆盖整个元素。
语法如下：
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背景属性用法示例） 背景重复：
默认情况下, 背景图像属性会水平和垂直重复图像。
要水平重复图像：
语法如下：
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背景属性用法示例） 要垂直重复图像：
语法如下：
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背景属性用法示例） 背景附件：
此属性用于修复背景地面图像。该图像不会随页面滚动。
语法如下：
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背景属性用法示例） 背景位置：
此属性用于将图像设置到特定位置。
句法 ：
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背景属性用法示例）】输出如下：
背景效果（CSS背景属性用法示例）

    推荐阅读


    上一篇：PHP如何使用Ds PriorityQueue copy()函数（示例）

    下一篇：jQuery如何使用ajaxError()方法（代码示例）