CSS中插入图片和背景图片的区别

怡然一记 • 2022-10-14 • 前端开发, 学习笔记 • 322 阅读

我们在CSS学习中知道可以通过两种方式在盒子中放入图片

  1. 通过图像标签img来实现图片的插入：
通过img插入图像
<div>
<img src="" art="">
</div>
  1. 通过背景图像background-image的方式插入:
通过背景图像插入
<style>
	.box {
		background-image: url();
}
<style/>
<body>
	<div class="box">
	<div/>
<body/>

那么他们有什么区别呢？

  • 如果使用img的方式插入图片如果我们需要改变图像的位置，这事我们会发现，我们可以通过margin和padding的方式设置内外间距去实现图像的位置变化。
  • 但是通过background-image的方式我们只能通过background-position的方式去改变图像的位置。
    代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta httpss-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入图片和背景图像位置设置的区别</title>
    <style>
        .pic,
        .bgi {
            height: 500px;
            width: 500px;
            border: 1px solid blue;
        }
        .pic img{
            /* 插入的图片只能通过模型的方式移动位置 margin padding  */
            margin: 30px;
        }
        .bgi {
            /* 而背景图片只能通过 background-position 改变位置 */
            background: url(../image/css/bgi.png) no-repeat ;
            background-position: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="pic">
        <img src="../image/css/pic.png" alt="img插入图片">
    </div>
    <div class="bgi"></div>
</body>
</html>

代码运行结果：

好了，今天的学习笔记就分享到这里了！

 

怡然一记
CSS中插入图片和背景图片的区别
https://xsunhua.cn/249.html
THE END
分享
二维码
打赏
海报
CSS中插入图片和背景图片的区别
我们在CSS学习中知道可以通过两种方式在盒子中放入图片 通过图像标签img来实现图片的插入： 通过img插入图像 <div> <img src="" art=""> <……
<<上一篇
下一篇>>
文章目录
关闭
目 录