大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
HTML与CSS中背景相关属性有哪些?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为万载企业提供专业的成都网站设计、成都做网站,万载网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
一. 背景尺寸属性
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告诉系统图片需要拉伸到宽度和高度都填满元素
6. contain >> background-size:contain;
6.1告诉系统图片需要等比拉伸
6.2告诉系统图片需要拉伸到宽度或高度都填满元素(只保证一边填满)
background-size
二. 背景图片定位区域属性
background-origin : 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
取值:
1.padding-box:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示; 2.border-box >> background-origin:border-box; 从border位置开始 3.content-box >> background-origin:content-box;从content位置开始
113-背景图片定位区域属性
背景图片定位区域属性
三. 背景绘制区域属性
background-clip:xxx;背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景114-背景绘制区域属性
背景绘制区域属性(红色为绘制区域)
四. 多重背景图片
元素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;
完整代码如下:
115-多重背景图片
多重背景图片
四.多重背景图片联系
先添加的背景图片会盖住后添加的背景图片116-多重背景图片-练习
关于HTML与CSS中背景相关属性有哪些问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。