一.背景尺寸属性
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小
background-size:xxxx;
取值:
1.具体像素>>background-size:200px100px;
2.百分比>>background-size:100%80%;
3.宽度等比拉伸>>background-size:auto100px;
4.高度等比拉伸>>background-size:100pxauto;
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位置开始
<htmllang="en"><head><metacharset="UTF-8"><title>113-背景图片定位区域属性</title><style>*{margin:0;padding:0;}ulli{list-style:none;float:left;width:100px;height:100px;text-align:center;line-height:100px;border:20pxdashed#000;padding:50px;margin-left:20px;background:url("images/dog.webp")no-repeat;}ulli:nth-child(2){/*告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示*/background-origin:padding-box;}ulli:nth-child(3){background-origin:border-box;}ulli: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区域开始绘制背景
<htmllang="en"><head><metacharset="UTF-8"><title>114-背景绘制区域属性</title><style>*{margin:0;padding:0;}ulli{list-style:none;float:left;width:100px;height:100px;text-align:center;line-height:100px;border:20pxdashed#000;padding:50px;margin-left:20px;background:redurl("images/dog.webp")no-repeat;}ulli:nth-child(2){/*背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的,默认情况下会从border区域开始绘制背景*/background-clip:padding-box;}ulli:nth-child(3){background-clip:border-box;}ulli: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.webp")no-repeatlefttop,url("images/animal2.webp")no-repeatrighttop,url("images/animal3.webp")no-repeatleftbottom;
注意点:
先添加的背景图片会盖住后添加的背景图片
background:url("images/animal1.webp")no-repeatlefttop,url("images/animal2.webp")no-repeatrighttop,url("images/animal3.webp")no-repeatleftbottom,url("images/animal4.webp")no-repeatrightbottom,url("images/animal5.webp")no-repeatcentercenter;
建议在编写多重背景时拆开编写
background-image:url("images/animal1.webp"),url("images/animal2.webp"),url("images/animal3.webp");background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;
完整代码如下:
<htmllang="en"><head><metacharset="UTF-8"><title>115-多重背景图片</title><style>*{margin:0;padding:0;}p{width:500px;height:500px;border:1pxsolid#000;margin:0auto;/*多张背景图片之间用逗号隔开即可注意点:先添加的背景图片会盖住后添加的背景图片建议在编写多重背景时拆开编写*//*background:url("images/animal1.webp")no-repeatlefttop,url("images/animal2.webp")no-repeatrighttop,url("images/animal3.webp")no-repeatleftbottom,url("images/animal4.webp")no-repeatrightbottom,url("images/animal5.webp")no-repeatcentercenter;*/background-image:url("images/animal1.webp"),url("images/animal2.webp"),url("images/animal3.webp");background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;}</style></head><body><p></p></body></html>
多重背景图片
四.多重背景图片联系
<a>先添加的背景图片会盖住后添加的背景图片</a>
<htmllang="en"><head><metacharset="UTF-8"><title>116-多重背景图片-练习</title><style>*{margin:0;padding:0;}p{width:600px;height:190px;border:1pxsolid#000;margin:100pxauto;background-image:url("images/bg-plane.webp"),url("images/bg-sun.webp"),url(images/bg-clouds.webp);background-repeat:no-repeat,no-repeat,no-repeat;background-size:50px50px,50px50px,autoauto;background-position:50px150px,400px50px,0px0px;animation:move10slinear0sinfinitenormal;}@keyframesmove{from{background-position:50px150px,400px50px,0px0px;}to{background-position:500px-150px,400px50px,-600px0px;}}</style></head><body><p></p></body></html>
本文转载自中文网 |
HTML与CSS中背景相关属性
推荐阅读
