插入图片和背景图片区别

最新推荐文章于 2022-09-17 15:02:22 发布

Yolo416

最新推荐文章于 2022-09-17 15:02:22 发布

阅读量150

点赞数

分类专栏：前端基础文章标签： css3

本文链接：https://blog.csdn.net/m0_50125215/article/details/115185989

版权

前端基础专栏收录该内容

59 篇文章 2 订阅

订阅专栏

本文探讨了如何使用CSS盒模型调整图片大小和位置，如通过`width`, `height`, `margin`, 和 `padding`，同时介绍了背景图片的定位技巧，重点讲解了`background-position`属性的应用。

摘要由CSDN通过智能技术生成

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
	}