引入图片方式
一、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切图必备技术