标签:次数 方式 com 翻转 链接 fixed 提高 显示图片 repeat-x
CSS控制背景
背景 background:颜色 图片 平铺方式 固定方式 位置
背景颜色 background-color:red;
背景图像 background-image:url(背景图像的位置及全称)
背景图片的重复方式 background-repeat:[repeat、no-repeat、repeat-x、repeat-y]
x坐标y坐标[第一个值是水平位置,第二个是垂直位置]左上角0 0。单位是像素(0px 0px)
背景图像的位置 background-position:top[left center right] center[left center right] bottom[left center right]
背景图像的依附方式 background-attachment:[scroll、fixed]
背景图片,默认情况是进行水平与垂直方向的平铺
默认背景图片,在元素的左上角显示
背景图片的依附方式:固定的含义是,将图片固定在,屏幕的某一个位置
兼容性:IE6只有html与body这两个元素,支持这个属性值。--background-attachment:fixed;
让你显得专业一点的技巧:
翻转效果:其思路就是,准备两张大小相同,内容不同的图片,正常情况下显示一张,在鼠标经过的时候再显示另一张
它叫伪类,表示一种状态
:link
CSS Sprites(CSS精灵)
制作翻转按钮效果的两种方法:
第一种:我们需要两张图片,一张正常状态的图片,一张鼠标经过时的图片,做这种按钮思路就是,设置链接a的背景为第一张图片a:hover的背景为第二张图片
第二种:将上面两张图片合并成一张图片、设置成按钮的背景,然后,将a:hover的背景向上移动相应的像素即可
css精灵技巧:主要是为了,减少 http 请求。
浏览器----服务器(交流)---超市购物---结账时侯。
优化网页的,http请求次数,提高网页的效率
****css精灵的核心思想:就是将多张图片,合并为一张图片,然后通过背景属性中的定位来控制到底显示图片中的哪些部分
******如果网页中能选择中的图片,肯定就是插入的图片,选不中,就是背景图片
标签:次数 方式 com 翻转 链接 fixed 提高 显示图片 repeat-x
原文地址:https://www.cnblogs.com/xiang-liang/p/12545492.html