【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )
CSS 模型 修改 图片 移动 插入 位置 背景
2023-09-14 09:07:26 时间
一、插入图片
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>
展示效果 :
相关文章
- 恶补web之二:css知识(3)
- 纯css模拟电子钟
- css盒子模型1
- CSS样式
- CSS 框模型( Box module )
- jquery动态加载js/css文件方法
- 前端学习 -- Css -- 内联元素的盒模型
- [CSS] Grid: X: justify-content, Y: align-items, X & Y: place-content
- [CSS3] Use CSS Variables to Maintain the Aspect Ratio for an Element
- [CSS] Transition
- 前端学习 -- Css -- 伪元素
- 简述css中的不同盒模型的特性,以及应用,介绍box-sizing属性
- SE81 - Application hierarchy CSS component tree
- 解决springBoot 的templates中html引入css文件失败
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
- 【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )
- 【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
- 【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
- 【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )
- 【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
- 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
- css如何实现一个元素高度固定宽度按比例显示?
- DIV+CSS两种盒子模型(W3C盒子与IE盒子)
- js css样式操作代码(批量操作)
- CSS(四)溢出、盒子模型
- uniapp——获取某元素距离顶部的距离,并将高度应用到css里面,为实现scroll-view内容而不让整个页面出现滚动条。