码迷,mamicode.com
首页 > Web开发 > 详细

CSS 背景图像

时间:2019-06-06 14:06:21      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:像素   梦想   简写   lower   重复   ref   iss   flow   一个   

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属性一样,有简写方法,它的简写顺序是:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. 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>

CSS 背景图像

标签:像素   梦想   简写   lower   重复   ref   iss   flow   一个   

原文地址:https://www.cnblogs.com/lszw/p/10984330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!