html5中背景图片的大小怎么调,css中怎么改变背景图片大小？

在CSS中，想要改变背景图片的大小，可以通过设置background-size属性来实现。下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法，希望对大家有所帮助。

background-size属性规定背景图像的尺寸，可通过长度值或百分比来设置图片大小，或者通过cover和contain来对图片进行伸缩设置。

语法：background-size: length|percentage|cover|contain;

属性值：值描述

length设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

percentage以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

示例：

div{

width: 400px;

height: 320px;

}

.box1{

background:url(../demo/1.jpg) no-repeat;

}

.box2{

background:url(../demo/1.jpg) no-repeat;

background-size: 200px 160px;

}

原始图片大小

本身这个图片宽度为400px，高度320px

通过CSS修改图片大小

效果图：

html5中背景图片的大小怎么调,css中怎么改变背景图片大小？相关推荐

html5单击修改背景色,js实现点击ul/li等改变背景颜色
今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. Change.html body li{ list-style-type: none; } 文字文字文字 function g(x) { ...
使用JS操作CSS实现JS改变背景图片
使用JS操作CSS实现JS改变背景图片在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变d ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
min-width.max-width属性中min-content.max-content的含义,css中minmax()用法.1fr单位的含义 min-width 表示容器的最小宽度 max-wid ...
android点击灰色背景图片,android button按键失去焦点和点击后改变背景图片
android button按键得到焦点和点击后改变背景图片我也接受android不久,今天来给同学们分享一下button得到焦点和点击后改变背景图片,其实很简单就是两个事件setOnFocusCh ...
前端背景图放置_如何在css中添加背景图？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css background属性就是专门设 ...
html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺发布时间:2021-04-29 15:39:28 来源:亿速云阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...
图片缩放不模糊之css中image-rendering使用
image-rendering css中的image-rendering是做什么的? 我们在做页面的时候经常会处理一些图片,比如让图片自适应外层容器的大小,等比例缩小或者放大. 1.我们在缩小图片的时 ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...

html5中背景图片的大小怎么调,css中怎么改变背景图片大小？

html5中背景图片的大小怎么调,css中怎么改变背景图片大小？相关推荐

最新文章

热门文章