【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

news2024/11/21 0:27:58

文章目录

一、插入图片
- 1、简介
- 2、代码示例
二、背景图片
- 1、简介
- 2、代码示例

一、插入图片

1、简介

插入图片 :

插入图片方式 : 在 HTML 中 , 使用 <img> 标签可以插入一张图片 ;
插入图片适用场景 : 显示内容 , 按钮 , 一般都使用插入图片的方式展示图片 ,
设置插入图片大小 : 通过设置盒子模型内容尺寸而设置图片大小 ;
- width 设置图片内容宽度 ;
- height 设置图片内容高度 ;
设置插入图片显示位置 : 通过设置盒子模型左边距和上边距而设置图片的位置 ;
- margin-left 设置图片的左外边距 ;
- margin-top 设置图片的上外边距 ;

代码示例 :

 	img {  
 		/* 设置图片大小 */
		width: 200px;
		height: 200px;

		/* 通过修改 盒子模型 外边距 修改图片显示位置 */
		margin-left: 50px;
		margin-top: 50px;
	}

2、代码示例

在该示例中 , 使用

<img src="images/image.jpg">

标签 , 插入图片 ,

通过设置 <img> 标签的宽高

			width: 200px;
			height: 200px;

来设置图片大小 ,

通过设置 <img> 标签的外边距

			/* 通过修改 盒子模型 外边距 修改图片显示位置 */
			margin-left: 50px;
			margin-top: 50px;

来设置图片的位置 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>插入图片</title>
	<style type="text/css">
		img {  
			/* 设置图片大小 */
			width: 200px;
			height: 200px;

			/* 通过修改 盒子模型 外边距 修改图片显示位置 */
			margin-left: 50px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/image.jpg">
	</div>
</body>
</html>

展示效果 :

在这里插入图片描述

二、背景图片

1、简介

背景图片 :

设置背景图片方式 : 在 CSS 中 , 为盒子设置 background 属性 , 设置背景图片 ;

		/* 设置图片背景 */
		background: pink url(images/image.jpg) no-repeat;

背景图片适用场景 : 显示小图标或超大背景 , 一般都使用背景图片的方式展示图片 ;
设置背景图片大小 : 通过设置背景图片的尺寸而设置图片大小 ;
设置背景图片显示位置 : 通过修改背景位置 background-position 修改图片显示位置 ;

代码示例 :

 	div {  
 		/* 设置盒子大小 */
		width: 400px;
		height: 400px;

		/* 设置图片背景 */
		background: pink url(images/image.jpg) no-repeat;
		/* 通过修改 背景位置 background-position 修改图片显示位置 */
		background-position: 50px 50px;
	}

2、代码示例

在该示例中 , 使用

background: pink url(images/image.jpg) no-repeat;

CSS 样式 , 设置背景图片 ,

通过修改背景位置 background-position 修改图片显示位置

			/* 通过修改 背景位置 background-position 修改图片显示位置 */
			background-position: 50px 50px;

来设置图片的位置 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>背景图片</title>
	<style type="text/css">
		div {  
			/* 设置盒子大小 */
			width: 400px;
			height: 400px;

			/* 设置图片背景 */
			background: pink url(images/image.jpg) no-repeat;
			/* 通过修改 背景位置 background-position 修改图片显示位置 */
			background-position: 50px 50px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>