css第六天

一，背景

背景颜色从border开始渲染

取消平铺后，背景图片从padding开始渲染

二，图片定位

数值法

特殊变量

百分比数值法 （盒子的宽度|高度+padding*2-图片的宽度|高度）*百分比 就是数值

background-position是复合属性，也可单独设置x和y

background复合属性可一起写

background：背景颜色 背景图片 平铺 定位 固定

background-color

background-image

background-repeat ：repeat（默认值，平铺） no-repeat（不平铺） repeat-x（水平平铺）repeat-y（垂直平铺）

background-position ：特殊值 水平 left center righ 垂直 top center bottom

background-attachment ：fixed（窗口固定图片，图片只能在盒子内移动，超过盒子不显示图片）

scroll 图片位置相对窗口变化，相对盒子不变

应用：设置渐变导航，设置banner，设置样式表

三，提高seo

网站不能识别h1中的图片

为了提高seo 可以给h1设置背景图片然后将文字消失即可

使文字消失方法

方法1 设置text-indent让文字溢出

方法2 设置文字字号为0

方法3 设置行高使文本溢出高度 然后通过overflow：hidden隐藏

方法4 设置padding 溢出隐藏

四，图片

矢量图：由函数曲线生成，放大图像不会造成失真

点阵图：由一个个像素点排列而成，放大会失真

矢量图有svg和flash

点阵图有psd jpg gif png webp

                png可分为png8和png24 24存储半透明，无锯齿 8存储不透明会全透明，边缘有锯齿