CSS中插入图片和背景图片的区别
我们在CSS学习中知道可以通过两种方式在盒子中放入图片
- 通过图像标签
img
来实现图片的插入:
通过img插入图像
<div>
<img src="" art="">
</div>
- 通过背景图像
background-imag
e的方式插入:
通过背景图像插入
<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



共有 0 条评论