欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

HTML与CSS中背景相关属性

程序员文章站 2022-03-11 23:36:17
...
这次给大家带来HTML与CSS中背景相关属性，使用HTML与CSS中背景相关属性的注意事项有哪些，下面就是实战案例，一起来看一下。

一. 背景尺寸属性

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

background-size:xxxx;

取值:

1.具体像素 >> 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告诉系统图片需要拉伸到宽度<a>和</a>高度都填满元素

6. contain >> background-size:contain;

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

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

background-size

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

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

取值:

1.<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位置开始
<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>

背景图片定位区域属性

三. 背景绘制区域属性

<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>

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

四. 多重背景图片

<a>先添加的背景图片会盖住后添加的背景图片</a>

元素c3之后可以设置多张背景图片
多张背景图片之间用逗号隔开即可

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;

注意点:

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

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;

完整代码如下:

<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>


多重背景图片

四.多重背景图片联系

<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>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

HTML与CSS中2D转换模块

HTML与CSS中的过渡模块

H5中的定位

以上就是HTML与CSS中背景相关属性的详细内容，更多请关注其它相关文章！

相关标签： HTML 样式表 css

上一篇： 5种正确处理JS的this指向的方式

下一篇： 深入JavaScript之基础应用

推荐阅读