首页 >web前端 >css教程 > 正文

css怎么设置背景图片大小

原创2021-03-31 16:35:3501041

在css中,可以使用background-size属性来设置背景图片的大小;语法格式为“background-size:length|%|cover|contain;”,默认值为“auto”。

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

css设置背景图片大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/1.jpg);
				background-size: 80px 60px;
				background-repeat: no-repeat;
				padding-top: 40px;
			}
		</style>
	</head>

	<body>
		<p>
			Lorem ipsum,中文又称“乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
		</p>

		<p>原始图片: <img src="img/1.jpg" alt="Flowers" width="224" height="162"></p>

	</body>

</html>

效果图:

1.png

【推荐教程:CSS视频教程

css background-size属性

background-size属性指定背景图片大小。

2.png

语法

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

更多编程相关知识,请访问:编程视频!!

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

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css 背景图片大小
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么判断有几位小数461
    php中转换首字母大写的函数是什么382
    Javascript怎么检查对象是否为空900
    推荐视频教程
  • CSS的美化功能CSS的美化功能
  • CSS视频教程-玉女心经版CSS视频教程-玉女心经版
  • HTML/CSS技术小知识每日分享HTML/CSS技术小知识每日分享
  • HTML+CSS网页基础HTML+CSS网页基础
  • CSS3 极速入门CSS3 极速入门
  • 视频教程分类