当前位置:首页 / 网页制作 / HTML/Xhtml教程 / HTML与CSS中背景相关属性介绍
HTML与CSS中背景相关属性介绍
芯晴素材特效 分类:HTML/Xhtml教程 发布日期:2018-04-15

这次给大家带来HTML与CSS中背景相关属性,使用HTML与CSS中背景相关属性的注意事项有哪些,下面就是实战案例,一起来看一下。

一. 背景尺寸属性

1.什么是背景尺寸属性

背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

background-size:xxxx;

取值:

1 2 3 4 51.具体像素  >> background-size:200px 100px; 2.百分比  >> background-size:100% 80%; 3.宽度等比拉伸  >> background-size:auto 100px; 4.高度等比拉伸  >> background-size:100px auto; 5.cover  >> background-size:cover;

5.1告诉系统图片需要等比拉伸

5.2告诉系统图片需要拉伸到宽度和高度都填满元素

6. contain >> background-size:contain;

6.1告诉系统图片需要等比拉伸

6.2告诉系统图片需要拉伸到宽度或高度都填满元素(只保证一边填满)

background-size

二. 背景图片定位区域属性

background-origin : 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;

取值:

1 2 31.<a>padding-box</a>:默认值  >>background-origin: padding-box;  告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;  2.<a>border-box</a>  >>  background-origin:border-box; 从border位置开始  3.<a>content-box</a>  >>   background-origin:content-box;从content位置开始
1<html  lang="en">  <head>     <meta charset="UTF-8">      <title>113-背景图片定位区域属性</title>     <style>          *{             margin: 0;             padding: 0;         }         ul  li{             list-style: none;             float: left;             width:  100px;             height: 100px;             text-align: center;              line-height: 100px;             border: 20px dashed #000;             padding:  50px;             margin-left: 20px;             background: url("images/dog.jpg")  no-repeat;         }         ul li:nth-child(2){             /*              告诉系统背景图片从什么区域开始显示,             默认情况下就是从padding区域开始显示              */             background-origin:  padding-box;         }         ul li:nth-child(3){              background-origin:border-box;         }         ul li:nth-child(4){              background-origin:content-box;         }     </style> </head>  <body> <ul>     <li>默认</li>      <li>padding</li>     <li>border</li>      <li>content</li> </ul> </body>  </html>

背景图片定位区域属性

三. 背景绘制区域属性

1 2<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的,  默认情况下会从border区域开始绘制背景 <html  lang="en">  <head>     <meta charset="UTF-8">      <title>114-背景绘制区域属性</title>     <style>         *{              margin: 0;             padding: 0;         }         ul li{              list-style: none;             float: left;             width: 100px;              height: 100px;             text-align: center;             line-height:  100px;             border: 20px dashed #000;             padding:  50px;             margin-left: 20px;             background: red  url("images/dog.jpg")  no-repeat;         }         ul li:nth-child(2){             /*              背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景              */             background-clip:  padding-box;         }         ul li:nth-child(3){             background-clip:  border-box;         }         ul li:nth-child(4){             background-clip:  content-box;         }     </style> </head> <body>  <ul>     <li>默认</li>     <li>padding</li>      <li>border</li>     <li>content</li> </ul>  </body> </html>

背景绘制区域属性(红色为绘制区域)

四. 多重背景图片

先添加的背景图片会盖住后添加的背景图片

元素c3之后可以设置多张背景图片

多张背景图片之间用逗号隔开即可

1background:  url("images/animal1.png")  no-repeat left top,url("images/animal2.png")  no-repeat right top,url("images/animal3.png")  no-repeat left bottom;

注意点:

先添加的背景图片会盖住后添加的背景图片

1background:  url("images/animal1.png")  no-repeat left top,url("images/animal2.png")  no-repeat right top,url("images/animal3.png")  no-repeat left bottom,url("images/animal4.png")  no-repeat right bottom,url("images/animal5.png")  no-repeat center center;

建议在编写多重背景时拆开编写

1background-image:  url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");  background-repeat: no-repeat, no-repeat, no-repeat; background-position: left  top, right top, left bottom;

完整代码如下:

1<html  lang="en">  <head>     <meta charset="UTF-8">      <title>115-多重背景图片</title>     <style>         *{              margin: 0;             padding: 0;         }         p{             width:  500px;             height: 500px;             border: 1px solid  #000;             margin: 0 auto;             /*              多张背景图片之间用逗号隔开即可             注意点:             先添加的背景图片会盖住后添加的背景图片              建议在编写多重背景时拆开编写             */             /*background:  url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat  right top,url("images/animal3.png") no-repeat left  bottom,url("images/animal4.png") no-repeat right  bottom,url("images/animal5.png") no-repeat center  center;*/             background-image:  url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");              background-repeat: no-repeat, no-repeat, no-repeat;              background-position: left top, right top, left bottom;         }      </style> </head> <body> <p></p> </body>  </html>

多重背景图片

四.多重背景图片联系

1 2<a>先添加的背景图片会盖住后添加的背景图片</a> <html  lang="en">  <head>     <meta charset="UTF-8">      <title>116-多重背景图片-练习</title>     <style>          *{             margin: 0;             padding: 0;         }          p{             width: 600px;             height: 190px;             border: 1px  solid #000;             margin: 100px auto;                        background-image: url("images/bg-plane.png"),url("images/bg-sun.png"),  url(images/bg-clouds.png);             background-repeat: no-repeat, no-repeat,  no-repeat;             background-size: 50px 50px, 50px 50px, auto  auto;          background-position: 50px 150px, 400px 50px, 0px 0px;              animation: move 10s linear 0s infinite normal;         }         @keyframes move  {             from{                 background-position: 50px 150px, 400px 50px,  0px 0px;             }             to{                 background-position:  500px -150px, 400px 50px, -600px 0px;             }         }     </style>  </head> <body> <p></p> </body>  </html>

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

Ajax选项卡、隔行换色、弹出遮罩层

2013-01-09   浏览:8397

HTML5 Canvas点击页面烟花绽放特效

2017-03-22   浏览:297

腾讯科技热点推荐图片展示效果

2017-03-12   浏览:473

jQuery点击弹出确认或取消删除特效

2017-03-13   浏览:426

WIN 8效果左右全屏滚动幻灯片

2017-02-28   浏览:116

用层模拟可移动/可隐藏的小窗口

2013-01-09   浏览:8284

jQuery+CSS实现图片感应鼠标高亮显示当

2013-01-18   浏览:8666

一款简洁的TAB滑动门修改

2013-01-16   浏览:8426

jQuery视差插件ImageScroll

2017-03-17   浏览:184

css3模拟雷达波向外散发动画效果

2017-03-09   浏览:465

固定在页面左侧的导航菜单

2013-01-06   浏览:9529

多彩背景色左右滑动导航

2017-02-26   浏览:220