CSS3调整背景图片大小的操作代码
发布时间：2024-01-19 15:09:53 作者：犬莱八荒 
我要评论
我要评论在CSS3中，如果想要调整背景图片的大小可以通过设置background-size属性进行设置，本文给大家介绍CSS3调整背景图片大小的操作代码，感兴趣的朋友一起看看吧
在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如何改变背景图片大小的详细内容。。
到此这篇关于CSS3如何调整背景图片大小的文章就介绍到这了,更多相关CSS3背景图片大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-04-13
这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-29- 这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-03-09
前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法，感兴趣的朋友跟随小编一起看看吧2019-11-05
css3实现一个div设置多张背景图片及background-image属性实例演示
这篇文章主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下2017-08-10CSS的background属性及CSS3的背景图片设置总结
这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下2016-06-13- 这篇文章主要介绍了CSS3对背景图片的裁剪及尺寸和位置的设定方法,在IE浏览器中要注意一下兼容性,需要的朋友可以参考下2016-03-07
- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- 使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-19
css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08
最新评论