HTML基础知识(十三)网页引入图片

引入图片方式
一、img标签
img:自带宽和高,只设置一个，那么另一个会等比缩放；宽高都设，图片变形。
jpg图片，背景不透明，有底纹，图片规则
png图片，背景透明，无底纹，图片不规则

<img src="img/timg.jpg"/>
<img src="img/timg.jpg width="300" height="478"/>
<img src="img/timg.jpg" width="300"/>
<img src="img/timg.jpg" width="100%"/>《图片全屏》
<img src="img/timg.jpg" height="478"/>

相关资料：img标签
注意：网页不许出现水平滚动条，出现原因是网页元素有超过界面宽度。
二、通过背景图 background:url(图片路径)
如果图片比块大那么图片只能显示块那么大
如果图片比块小那么图片会自动重复排列把块铺满
（背景和背景图片的关系就像墙面和壁纸，大了多贴，小了撕开）
1、背景图片取消重复不平铺
background-image: url(img/timg.jpg) no-repeat;
2背景图片居中显示
background-image: url(img/timg.jpg) no-repeat center;
2背景图片右下显示,左上同理
background-image: url(img/timg.jpg) no-repeat bottom right;
相关资料：css 背景图片自适应属性整理
三、PS的切图
建议去掉自动选择，
Ctrl+鼠标左键——》拖动，
Ctrl+z——》撤销两步,
Ctrl+z+Alt——》连续撤销
切下的图右键导出
缩放 Ctrl+"+“放大Ctrl+”-"缩小
测量距离 按空格键矩形移动；Ctrl+"d"取消测量框
切图相关资料：前端工程师PS切图必备技术