网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

css中background的使用总结

1

创新互联主要从事成都网站制作、成都做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务顺昌,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

css中background的使用总结

效果:

css中background的使用总结

2

css中background的使用总结

效果:

css中background的使用总结

3

css中background的使用总结

效果:

css中background的使用总结

4 background-size的用法

css中background的使用总结

注意:盒子的大小是: 

宽度:500px 高度:150px;

图片的实际大小:宽度:533px  高度:300px;

此时的效果:

css中background的使用总结

注意:宽度是100%  高度是auto:

所以超出的部分会隐藏掉

另一种情况:

css中background的使用总结

此时的效果:

css中background的使用总结

此时图片的高度小于容器的高度 所以容器多出了很多空白地方

所以说:background:100%; 是有两种呈现的效果。要么隐藏掉多余的部分图片,要么容器活出空白地方

css中background的使用总结

此时的效果:

css中background的使用总结

css中background的使用总结

此时的效果:

css中background的使用总结

此时图片并没有显示完全

总结:

background-size:100%;       // 宽度100% 高度auto(按图片本身的宽/高比进行缩放显示) 这种不一定会铺满整个容器 也有可能超出的部分会被隐藏掉

backgrond-size:100% 100%;      // 宽度100% 拉伸 高度也是100% 拉伸  这种一定会铺满整个容器

background-size:cover;    // 也会铺满整个容器大小 图片比例不变


网页标题:css中background的使用总结
转载注明:http://bjjierui.cn/article/gjepdh.html

其他资讯