转载自：https://my.oschina.net/wyc1219/blog/864212
首页 开源项目 问答 动弹 博客 翻译 资讯 专题 活动 招聘 码云特惠 [ 登录 | 注册 ] 1.background2.img 博客专区 > Van-c的博客 > 博客详情 css之img标签和background属性 Van-c 发表于5个月前 原css之img标签和background属性 收藏 Van-c 发表于 5个月前 阅读 11 收藏 0 点赞 0 评论 0腾讯云上实验室 1小时搭建人工智能应用 让技术更容易入门>>>
说道图片，最常用的两个就是img标签和background属性了
适用元素：所有元素
(1)background-image:默认值none。url("")，设置背景图片
(2)background-repeat:默认值repeat。（可选no-repeat）。背景图片是否重复
(3)background-size:默认值（auto，auto）。（可选百分比或值）。背景图片大小
可以利用background-size：100%；实现背景图片宽度适应框大小。
background-size：100% 100%；宽和高都适应框大小
(4)background-position:默认值（0%，0%）。（可选百分比或值或top，bottom，right，left，center）。背景图片位置
值：值为图像左上角到元素左上角的值
百分比：假设指定x%，是指图像上x%的值里元素做商家x%个父元素的值。
举个栗子:background-position: 50% 0;让一个背景和margin-left：50；让一个img图像居中。第一个居中了，第二个没居中，还要减去图像的一半宽度。
原因就是前者是相对自身x%的位置，后者是相对自身的左上角。
(5)background-color：transparent。默认透明。背景图片颜色
(6)background-orgin:默认padding-box。（可选，padding-box，border-box，content-box）
可以写个100*100的div，设置dotted边框和background-size：100% 100%的背景，就会发现边框下面无背景
注：background-color默认是border-box
(7)background-clip:默认是border-box。（可选border-box，padding-box，content-box）。背景裁剪。而background-orign设置背景开始显示的位置
(8)background-attachment:scroll。（可选scroll，fixed，local）
fixed：背景相对视口固定
scroll：背景相对视口滚动
local：背景相对元素内容固定
注意：
background：只是设置背景大小，不会撑起div，要事先设定宽高。
替换元素，默认图片原始宽高。通过设置width：100%；适配屏幕。
什么时候用img，什么时候用background？
1.雪碧图拆分要用background。大图直接引入用img。
2.不影响页面布局用background。影响页面布局用img。
© 著作权归作者所有 分类：css 字数：482 打赏 点赞 收藏 分享 + 关注 Van-c 徐汇 粉丝 2 博文 37 码字总数 24947 相关博客 [py] 提取网页中的img标签及其src值 Northland 93 0 CSS去掉A标签（链接）虚线框的方法 furw 18 0 HTML常用标签汇总、CSS常用属性汇总 僵小蛋 1 0 评论 (0) 顶部