您现在的位置是:首页 > Javascript
当前栏目
CSS3如何调整背景图片大小
2023-03-31 10:39:13 时间
系列文章目录
在CSS3中,如果想要调整背景图片的大小可以通过设置background-size属性进行设置。
一、background-size
语法格式
background-size: length|percentage|cover|contain;
二、参数详解
使用的例子背景图片
1.length
length:设置背景图片的高度与宽度。第一个值设置宽度,第二个值为高度。如果只给出第一个值,那么第二值则设置为auto(自动)。
举例,将背景图片改为20emx20em(默认1px = .05em)
width: 30em;
height: 22em;
background: greenyellow;
background-size:20em 20em;
background-image: url("src/assets/csdn/bg.jpg");
background-repeat: no-repeat;
2.percentage
percentage:将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值为高度,各个值之间以空格 隔开指定高和宽,以逗号 , 隔开指定多重背景。如果只给出一个值,第二个是设置为auto(自动)。
background-size:80% 70%;
3.cover
cover:保持图像的横纵比将图像缩放成完全覆盖背景定位区域的最小大小。
background-size:cover;
4.contain
contain:保持图像的横纵比将图像缩放成适应背景区域的最大大小。
background-size:contain;
总结
以上就是css如何改变背景图片大小的详细内容。。
相关文章
- 这30个超级工具!前端开发很喜欢
- 中文域名对建设网站有什么影响?中文域名有什么优点?
- MyBatis 整合spring boot
- 《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)
- 亚马逊将关闭其 Web 排名网站 Alexa.com
- EasyCVR开启接口鉴权后网址实现无密码登录
- css动画之@keyframes
- 【Rust日报】2021-12-01 Hubris - 一个用于嵌入计算机系统的小型开源操作系统
- PHP开发 MAC 自带apache从php7切换到php5
- 浏览器的控制权转交给 JavaScript 引擎
- 【JS 逆向百例】W店UA,OB反混淆,抓包替换CORS跨域错误分析
- [网络安全] 一.Web渗透入门基础与安全术语普及
- [网络安全] 三.社会工程学那些事及IP物理定位
- 信息检索的预前方法
- [网络安全] 二十四.Web安全学习路线及木马、病毒和防御初探
- [网络安全] 二十九.小白渗透之路及Web渗透简单总结(YOU老师)
- 彻底搞清楚 JavaScript 的原型和原型链 Object.prototypeObject.__proto __小结共同点特例
- 听说你还不会虚拟列表?原谅我来晚了
- LRU缓存-keep-alive实现原理
- 使用 CSS 轻松实现一些高频出现的奇形怪状按钮