CSS学习中|插入图片和背景图片区别

1.插入图片，用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin

2.背景图片我们一般用于小图标的背景背景图片只能通过background-position

插入图片代码：

给padding值，图片可以移动，但是盒子同时被撑大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>插入图片和背景图片的区别</title><style>.pic {width: 200px;height: 200px;background-color:aquamarine; padding: 20px;}</style>
</head>
<body><!-- 盒子中插入图片 --><div class="pic"><img src="../images/bg.gif"/></div>
</body>
</html>

样例：

盒子被撑大不够理想，想保持盒子大小同时移动图片位置

这时我们应该考虑给图片一个外边距值margin

代码：

样例：

实现了盒子没有被撑开同时图片移动

背景图片代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>插入图片和背景图片的区别</title><style>.pic {width: 200px;height: 200px;background-color:aquamarine; /* padding: 20px; */}.pic img {margin: 20px;}.bg {width: 200px;height: 200px;border: 1px solid black;background: url(../images/bg.gif) no-repeat;background-position: 20px 20px;}</style>
</head>
<body><!-- 盒子中插入图片 --><div class="pic"><img src="../images/bg.gif"/></div><!-- 背景图片 --><div class="bg"></div>
</body>
</html>

样例：

CSS学习中|插入图片和背景图片区别相关推荐

在网页中插入一个透明背景的PNG图片
在网页中插入一个透明背景的PNG图片,可是在显示的时候,它的背景就成灰色了.这是IE的bug.需要加入以下代码: <script language="jscript"> ...
iphone iPhone开发中为UINavigationBar设置背景图片方法
1:原文摘自:http://mobile.51cto.com/iphone-284865.htm iPhone开发中为UINavigationBar设置背景图片方法是本文要介绍的内容,在iPhone开 ...
php背景图片透明度,css如何使用opacity属性给背景图片加透明度（代码）
本篇文章给大家带来的内容是关于css如何使用opacity属性给背景图片加透明度(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS 中无法直接给背景图片加 opacity ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
latex中插入两张子图片
背景如何在latex中插入两张子图片呢? 步骤参照下面的代码: \begin{figure}[htbp] \label{fig:3} % Give a unique label \quad \su ...
jsp中给div加背景_html中给元素添加背景图片或者gif动图
添加背景图片有四种常用的方式,分别是: repeat 完全平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 不平铺使用示例: Document ...
插入图片与背景图片的区别
插入图片与背景图片的区别 1.修改插入图片插入一张图片 <style type="text/css">section { /*单纯设置一个盒子的基础属性*/width ...
excel表在html显示图片,html背景图片不显示!如何在Excel里插入背景图片？背景图片可以打印出来吗？...
EXCEL窗体无法插入背景图片,为什么?如图: 设置用户窗体的picture属性,可以使用的图片文件格式有bmp,gif,jpg等.不支持png或tif图片. excel工作表背景设置图片后,打印不显 ...
VC中为对话框添加背景图片
From: http://blog.ezcn8.com/2011/06/11/vc%E4%B8%AD%E4%B8%BA%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%B7%BB%E5%8 ...

CSS学习中|插入图片和背景图片区别

1.插入图片，用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin

2.背景图片我们一般用于小图标的背景背景图片只能通过background-position

CSS学习中|插入图片和背景图片区别相关推荐

最新文章

热门文章

CSS学习中|插入图片和背景图片区别

1.插入图片，用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin

2.背景图片我们一般用于小图标的背景 背景图片只能通过background-position

CSS学习中|插入图片和背景图片区别相关推荐

最新文章

热门文章

2.背景图片我们一般用于小图标的背景背景图片只能通过background-position