关于HTML与css图片定位和背景属性的分享

一、图片定位

html网页中图片引入应用img标签，要设置装备摆设图片大小，即配置img大小。图片大小是什么？
1、图片大小指图片宽度和高度改变，异样一张图宽度高度值大即变大，高度宽度值设置小即这张图就会排版变小。在img标签内直接配置width属性与height属性即可旋转图片大小，图标img标签直接设置装备摆设width与height窜改大小或是看到运用width与height属性的值是不需求单位的，单位默许为像素。

2、img标签内运用style设置装备摆设CSS改动大小在img标签内设置装备摆设style属性直接写宽度 高度CSS属性，改变图片的大小。style配置宽度与高度从而扭转大小。

定位   position：；

相对定位：relative

1、相对定位是该元素基于原来位置的位置偏移

2、占用原来的位置，不会脱离文档流

绝对定位：absolute

1、会覆盖住下面的文档流内容，包括文字

2、他会依据body作为参考，进行位置偏移

3、他使用绝对定位后，该元素不会占有原来的位置（脱离文档流）

4、子绝父相(如果子元素使用了绝对定位，父元素则需要添加一来让子元素依据最近的父元素进行位置定位)

5、会根据最近一层拥有定位属性的父级元素进行偏移

固定定位：fixed

1、脱离标准文档流

2、该元素会依据当前浏览器窗口进行定位

3、浏览器窗口放大缩小会随之变化

黏性定位：

1、占用原来的位置 不脱标，粘性定位占有原先的位置（相对定位特点），以浏览器的可视窗口为参照点移动元素（固定定位特点）

 2、黏性定位可以被认为是相对定位和固定定位的混合，该元素在跨越特定阈值前为相对定位，之后为固定定位

3、必须添加 top 、left、right、bottom 其中一个才有效，跟页面滚动搭配使用。 兼容性较差，IE 不支持。

二、背景属性

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

背景：

先给了一个高；url图片路径；image背景图片；repeat在x或y轴不重复（repea-x、repea-y）；color背景颜色；position位置调整；有上下和左右的值；单位可以用偏移量的字面量单位和百分比单位和像素；size：cover扩大尺寸，覆盖父元素，可能部分图片看不到/contain扩大最大尺寸，不一定覆盖住父元素，可能图片放大后部分有留白；attachment：fixed固定在原来位置，但滚动会逐渐消失（背景图是否固定，父元素消失图片也会跟着消失）；background: 颜色  Skyblue url（）  no-repeat  fixed  centen 。