• 技术文章 >web前端 >前端问答

    css中的背景图片怎么变小

    青灯夜游青灯夜游2021-09-10 18:06:20原创144

    在css中,可以利用background-size属性来让背景图片变小,该属性可以控制背景图片的大小,只需要给背景元素添加“background-size:宽度值 高度值;”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以利用background-size属性来让背景图片变小。

    background-size属性用于指定背景图片大小。语法格式如下:

    background-size: length|percentage|cover|contain;
    描述
    length设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)
    percentage将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"
    cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

    示例:

    给div元素添加一个背景图片

    <!DOCTYPE html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		div{
    			width: 100%;
    			height: 1000px;
    			background: url(img/1.jpg) no-repeat;
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

    效果图:

    1.png

    下面使用background-size属性可以控制背景图片的大小

    div{
    	width: 100%;
    	height: 1000px;
    	background: url(img/1.jpg) no-repeat;
    	background-size:200px 250px;
    }

    效果图:

    2.png

    推荐教程:《CSS视频教程

    以上就是css中的背景图片怎么变小的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:先引入js还是css文件 下一篇:es6属于什么编程
    线上培训班

    相关文章推荐

    • HTML5+CSS3动态画出一个大象• 使用CSS快速更改PNG图像的颜色(两种方法)• 如何使用HTML5+CSS3动态画一个笑脸• 炫酷!CSS创建响应式堆叠卡片悬停效果• css如何设置标题阴影边框

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网