首页 > 代码库 > 繁星CSS3之旅-CSS基本样式-CSS背景
繁星CSS3之旅-CSS基本样式-CSS背景
CSS背景
1、背景
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
（1）设置背景颜色
例：
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <p>测试背景是否可以继承</p></html>
body{ background-color: darkgray;}p{ width:150px;/*增宽*/ padding: 10px;/*内边距10px*/ background-color: red;}
效果图
（2）、设置背景图片
body{ background-image: url("bg.jpg");/*图片名称*/}
效果图
body{ background-image: url("bg.jpg");/*图片名称*/ background-repeat: repeat-x;/*重复X轴&重复y轴：repeat-y*/}
body{ background-image: url("bg.jpg");/*图片名称*/ background-repeat: no-repeat;/*重复X轴&重复y轴：repeat-y*/ background-position: center top;/*从中间顶部开始显示*/}
background-attachment效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p> <p>测试背景是否可以继承</p></html>
body{ background-image: url("bg.jpg");/*图片名称*/ background-repeat: no-repeat;/*重复X轴&重复y轴：repeat-y*/ background-position: left top;/*从中间顶部开始显示*/ background-attachment: fixed;}
2、CSS3背景
繁星CSS3之旅-CSS基本样式-CSS背景
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。