图片自适应平铺

最新推荐文章于 2023-11-28 11:56:00 发布

MillionMile

最新推荐文章于 2023-11-28 11:56:00 发布

阅读量1k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_38125045/article/details/109102859

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码

显示图片是一个前端最常见的功能，但是总是写图片适应大小好烦人哦，使用下面的样式，记录留底。

.mydiv的样式是很常见的列表展示用的小图，使用该样式调整自定宽高即可。建议图片的宽高比与div的宽高比大致一致，区别太大神仙也救不了。

body的样式是背景图片展示使用，让页面的背景不再单调~

<html>
<head>
<style>
.my_div{
	width:50%;
	height:50%;
	background: url(background.jpeg) no-repeat center;
	background-size: cover;
	background-color: #CCCCCC;
}

body{
	background: url(background.jpeg) no-repeat center;
	background-size: cover;
	background-color: #CCCCCC;
	background-attachment: fixed;	//如果是要做全屏背景，使用它
}
</style>
</head>

<body>
	<div class="my_div"></div>
</body>
</html>