CSS 背景图像
background-image 属性可以设置背景图像。
背景图像可以填充整个页面的,也可以填写一部分。
background-image 属性的使用很简单:background-image:url(图片地址)
填充整个页面示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>背景图片</title> 5 <style type="text/css"> 6 <!--背景图片样式--> 7 #web_bg { 8 position: fixed; 9 top: 0; 10 left: 0; 11 width: 100%; 12 height: 100%; 13 min-width: 1366*768px; 14 z-index: -10; 15 zoom: 1; 16 background-color: #fff; 17 background-repeat: no-repeat; 18 background-size: cover; 19 -webkit-background-size: cover; 20 -o-background-size: cover; 21 background-position: center 0; 22 } 23 24 </style> 25 </head> 26 <body> 27 <h1>叮当猫</h1> 28 <!--添加背景图片--> 29 <div id="web_bg" style="background-image: url(E://老师的例子/个人简绍/picture/72.jpg);"></div> 30 </body> 31 </html>
填充部分元素示例
为某个元素设置CSS规则background-image 属性,则可以做到部分元素有背景颜色。
下面的示例演示如何如何给段落元素加背景。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>填充部分</title> 5 <style type="text/css"> 6 p { 7 background-image: url("https://static.collectui.com/shots/2890879/colorful-patterns-large"); 8 padding: 10px; 9 color:#fff;} 10 </style> 11 </head> 12 <body> 13 <h1>软件开发,成就梦想</h1> 14 <h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2> 15 <p>我们能为中国‘996’程序员做些什么?怎样才能能引起西方媒体和政府的关注?</p> 16 <p>在程序员圈子里颇有名气的代码托管平台GitHub上,有人发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”, 17 “996”即许多企业的程序员工作状态,从上午9点干到晚上9点,每周工作6天。这一项目得到了大量程序员的响应,自从3月26日注册以来, 18 截至4月2日Star数已突破15万整数关口,表示至少有15万名程序员关注了这个项目。</p> 19 </body> 20 </html>
以上图像素材来源 http://collectui.com/challenges/background-pattern
重复图像
background-repeat 属性可以重复图像,这对于小图片来说是福音。
background-repeat 属性有6个值:
- repeat 背景图像在垂直方向和水平方向都重复
- repeat-x 背景图像在水平方向重复
- repeat-y 背景图像在垂直方向重复
- scroll 背景图像随着滚动页面而动
- no-repeat 背景图像只显示一次
- fixed 背景图像固定在页面中一个位置
下面的代码演示背景图像在水平方向重复。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>重复图像</title> 5 <style type="text/css"> 6 body { 7 background-image: url("https://www.liyongzhen.com//docs/images/header.gif"); 8 background-repeat: repeat-x; 9 color: #665544; 10 padding: 20px;} 11 h1 { 12 color: white;} 13 </style> 14 </head> 15 <body> 16 <h1>软件开发,成就梦想</h1> 17 <h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2> 18 <p>我们能为中国‘996’程序员做些什么?怎样才能能引起西方媒体和政府的关注?</p> 19 <p>在程序员圈子里颇有名气的代码托管平台GitHub上,有人发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”, 20 “996”即许多企业的程序员工作状态,从上午9点干到晚上9点,每周工作6天。这一项目得到了大量程序员的响应,自从3月26日注册以来, 21 截至4月2日Star数已突破15万整数关口,表示至少有15万名程序员关注了这个项目。</p> 22 </body> 23 </html>
背景图片定位
background-position属性可以给背景图片定位。
background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置。这两个值可以使用百分比来表示(50% 50% 表示垂直和水平都居中)。
也可以使用下面的方式表示:
- left top
- left center
- left bottom
- center top
- center center
- center bottom
- right top
- rigth center
- right bottom
下面的代码演示了背景图像定位。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片定位</title> 5 <style type="text/css"> 6 body { 7 background-image: url("https://www.liyongzhen.com//docs/images/spring-flower.png"); 8 background-repeat: no-repeat; 9 background-position:center top; 10 color: #665544; 11 padding: 20px;} 12 h1 { 13 color: white;} 14 </style> 15 </head> 16 <body> 17 <h1>软件开发,成就梦想</h1> 18 <h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2> 19 <p>我们能为中国‘996’程序员做些什么?怎样才能能引起西方媒体和政府的关注?</p> 20 <p>在程序员圈子里颇有名气的代码托管平台GitHub上,有人发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”, 21 “996”即许多企业的程序员工作状态,从上午9点干到晚上9点,每周工作6天。这一项目得到了大量程序员的响应,自从3月26日注册以来, 22 截至4月2日Star数已突破15万整数关口,表示至少有15万名程序员关注了这个项目。</p> 23 </body> 24 </html>
图片来源 https://www.kisspng.com/
background属性简写
background属性可以像margin padding属性一样,有简写方法,它的简写顺序是:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
如果某属性不想写,可以忽略。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>background简写</title> 5 <style type="text/css"> 6 body { 7 background: url("https://www.liyongzhen.com//docs/images/spring-flower.png") no-repeat center top; 8 color: #665544; 9 padding: 20px;} 10 h1 { 11 color: white;} 12 </style> 13 </head> 14 <body> 15 <h1>软件开发,成就梦想</h1> 16 <h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2> 17 <p>我们能为中国‘996’程序员做些什么?怎样才能能引起西方媒体和政府的关注?</p> 18 <p>在程序员圈子里颇有名气的代码托管平台GitHub上,有人发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”, 19 “996”即许多企业的程序员工作状态,从上午9点干到晚上9点,每周工作6天。这一项目得到了大量程序员的响应,自从3月26日注册以来, 20 截至4月2日Star数已突破15万整数关口,表示至少有15万名程序员关注了这个项目。</p> 21 </body> 22 </html>