| 【CSS】盒子模型外边距 ③ ( 插入图片 | 您所在的位置：网站首页 › 背景图片css代码 › 【CSS】盒子模型外边距 ③ ( 插入图片 |
【CSS】盒子模型外边距 ③ ( 插入图片
|
【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )
原创
韩曙亮_ 2023-03-26 20:41:36 ©著作权 文章标签 css html 前端 插入图片 背景图片 文章分类 HarmonyOS 后端开发 ©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任 文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片1、简介
插入图片 : 插入图片方式 : 在 HTML 中 , 使用代码示例 : img { /* 设置图片大小 */ width: 200px; height: 200px; /* 通过修改 盒子模型 外边距 修改图片显示位置 */ margin-left: 50px; margin-top: 50px; }2、代码示例
在该示例中 , 使用  标签 , 插入图片 , 通过设置 来设置图片大小 , 通过设置 来设置图片的位置 ;
代码示例 : 插入图片 img { /* 设置图片大小 */ width: 200px; height: 200px; /* 通过修改 盒子模型 外边距 修改图片显示位置 */ margin-left: 50px; margin-top: 50px; }
展示效果 :
二、背景图片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;来设置图片的位置 ;
代码示例 : 背景图片 div { /* 设置盒子大小 */ width: 400px; height: 400px; /* 设置图片背景 */ background: pink url(images/image.jpg) no-repeat; /* 通过修改 背景位置 background-position 修改图片显示位置 */ background-position: 50px 50px; }展示效果 :
赞 收藏 评论 分享 举报 上一篇：【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 ) 下一篇：【ARCore】Android ARCore 简介 ( AR 增强现实技术简介 | Android 平台常用的 AR 技术 | ARCore 相关资料收集 ) |
【本文地址】
公司简介
联系我们