位置: IT常识 - 正文

background-size 之 背景图的尺寸设置

编辑:rootadmin
background-size 之 背景图的尺寸设置

目录

一:background-size参数取值

1.0

1.1

二:实例分析

2.1 参数分析

2.2 代码实例分析


推荐整理分享background-size 之 背景图的尺寸设置,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

引:background-size: 没有设置任何尺寸时使用图片本身的大小,宽度和高度都是auto默认值

可以用px设置成具体的值,也可以使用百分比

一:background-size参数取值1.0

    1个值 同时设置宽高     2个值 分别设置宽高

1.1

1     以px为单位的数字 2     % 3     cover 让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎 4     contain 让图片完全在容器中显示(等比例缩小)哪怕容器有空白,也没关系

1.2 作用范围

这些属性能够写在一个简单的属性中:background。必须指出background负责元素内容部分的背景,包括padding和border,但不包括margin。

二:实例分析

各种不同比例的适配问题,完美适配很少发生

2.1 参数分析background-size 之 背景图的尺寸设置

background-size: 100% 50%;  宽度占满屏幕,高度占50%

background-size: 100% 100%; 宽度高度都占满整个屏幕,除非图片完美适配,否则图片会变形

background-size: 100% auto; 宽度占满屏幕,高度自动适配,高度有所牺牲

background-size: auto 100%; 高度占满屏幕,宽度自动适配,宽度有所牺牲

至于是要牺牲宽度还是高度,具体问题具体分析,比如学子的沙发可以裁掉,有的背景图不能裁

background-size: cover;铺满整个容器,多余的部分会被裁掉

background-size: contain;至少有一张完整的图呈现出来,一定会有多余的空间

2.2 代码实例分析

背景图1和背景图2 you红色边框分隔开来

背景图1

背景图2

<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景图片的尺寸</title><style type="text/css">* {margin: 0;padding: 0;}/* 版心尽量清爽一点,就设置宽度与居中 */.center {width: 900px;margin: 0 auto;}/* 背景图1的相关设置 */.pic {/* 宽度使用父级的 */height: 500px;border: 5px solid red;/* 加入背景图 */background-image: url(img/bg.png);/* 尺寸设置 */background-size: 600px 300px;/* 可以使用百分比,但是宽高都是100%的情况,防止图片变形 */background-size: 100% 100%;/* 宽度100%,高度自动适配,会牺牲一部分高度 */background-size: 100% auto;/* 宽度自动适配,高度100%,会牺牲一部分宽度 */background-size: auto 100%;/* 铺满整个屏幕,多余的部分会被裁掉 */background-size:cover; /* 至少有一张完整的图呈现出来,一定会有多余的空间 */background-size:contain;}.shucai {height: 300px;background-image: url(img/carousel-1.jpg);background-size: auto 100%;/* 与contain是有区别的,注意观察两种值不同的效果 */background-size: 100% auto;/* 至少有一张完整的图片展现出来 */background-size: contain;/* 铺满整个容器,多余的部分会被裁掉 *//* background-size: cover; */}</style></head><body><div class="bg1"><div class="center"><!-- pic这个要设置与背景图相关的样式 --><div class="pic"></div></div></div><div class="bg2"><div class="center"><!-- pic这个要设置与背景图相关的样式 --><div class="shucai"></div></div></div></body></html>

本文链接地址:https://www.jiuchutong.com/zhishi/296180.html 转载请保留说明!

上一篇:《Web应用开发》(头歌)(《web应用开发》是什么)

下一篇:浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--(后端、nginx、前端)(浏览器同源策略限制)

  • 个人所得税应纳税额怎么计算
  • 杭天金税财务软件多少钱
  • 抗税的性质
  • 残保金为啥经过个人账户
  • 增值税一般纳税人税率
  • 已交的增值税能计入费用吗
  • 为企业担保
  • 税务局查账需要几天
  • 出售生产线计入哪里
  • 售后回租产生的费用
  • 门店活动经费计入什么
  • 不含税的营业收入是什么意思
  • 取得进项票当月未认证
  • 税务审计什么时候进行
  • 营改增后企业所得税
  • 贸易公司购买汽车的发票可以用抵公司的税吗
  • 工程开票是否需要资质?
  • 物业公司一般纳税人怎么抵扣
  • 出口公司代理
  • 调整固定资产原值减少
  • 内部调拨账务处理
  • 发票已抵扣未入账
  • mac怎么分区硬盘分区
  • 本地磁盘c满了怎么清理
  • cmos密码和bios密码
  • 内置管理员无法打开此应用
  • windows11激活密钥多少钱
  • php数组函数大全
  • 闲置私家车出租APP
  • yii2关联查询
  • 小企业会计准则2023电子版
  • 现代服务业进项税加计扣除申报怎么填
  • php js
  • 以前年度损益调整在利润表中怎么填
  • html文档基本结构包括哪几部分
  • 大前端入门指南
  • yolov3输出是什么
  • 不仅仅是喜欢原唱
  • 去年计提的费用所得税汇算清缴之前冲销就不调整吗
  • username命令
  • 底薪和提成分开发合法吗
  • 税务代开,开错了重开要多久?
  • 法人给对公账户转账
  • 改造后的固定资产入账价值
  • 织梦程序
  • 终止经营损益列报 举例
  • 跨月已计入费用后收到发票
  • 认缴制下入股资产怎么算
  • 一般纳税人之外还有什么
  • 一般纳税人增值税怎么做账务处理
  • 增值税扣款了能退回吗?
  • 一般纳税人可以开1%的发票吗
  • 关于消费税的会计处理
  • 未抵扣进项税额转出会计分录
  • 获取sqlserver密码
  • sql Server 触发器的when的用法
  • ubuntu系统安装无线网卡驱动
  • 微软雅黑可以免费用吗
  • win8怎么查看系统版本
  • winserver是什么意思
  • linux版的oracle
  • Linux中环境变量的用法
  • macbook 苹果系统
  • igfxem module是什么程序
  • win1021h2版本千万别更新
  • 360对win7支持多久
  • android开发环境配置
  • android adapter
  • Unity3D游戏开发标准教程
  • Node.js中的包管理工具是什么
  • shell脚本switch
  • shell脚本 !
  • 设计shell程序
  • js实现跨域访问的几种方式
  • 国家税务局公告2021年第3号
  • 增值税发票怎么购票
  • 个人领税票需要哪些资料
  • 税务局与税务所工资哪个高
  • 北京市印花税减免政策
  • 举报信如何投递
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设