背景图

Posted 2021-03-06 wxy0715

<!--######背景图和img元素的区别
    img是html的概念
    背景图是css的概念
    1.当图片属于网页内容时,必须使用img元素
    2.当图片仅用于图片美化时,必须使用背景图

#####涉及的css属性
1.background-image:url("")
2.background-repeat:  默认情况下横纵坐标无限重复
3.background-size:container包含 cover撑满 background-size:100% 100%;控制背景图尺寸
4.background-position 设置背景图的位置1.background-position:center横向纵向居中2.background-position:center top 横向居中纵向向上 可以数值 百分比
5.雪碧图(精灵图){spirit}
6.background-attachment:fixed 吧背景图固定相对于视口 ,scroll  local背景图不会跟随内容一起滚动
             background-Origin  
属性指定了背景图像的位置区域。 content-box, padding-box,和 border-box区域内可以放置背景图像。 
          background-clip属性指定背景绘制区域。
border-box
默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box
背景绘制在衬距方框内（剪切成衬距方框）。
content-box
背景绘制在内容方框内（剪切成内容方框）。
7.速写(简写) background:url() no-repeat 50% 50%/100% fixed #000;
-->