• 当前标签:图片精灵

程序开发 H5学习之背景图片、图片精灵、多重背景、背景图片位置

背景图片: <html> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> body{ /* 流式布局 从左到右 从上到下 */ height: 100%; /*因为标签总是会尽最大努力占据最小高度 所以当body中内容时 高度为0 故将高度设置为100%*/ background-image: url(lry.jpg); margin: 0; /*因为body标签默认带有8px的外间距 所以设置高度为100%时 则会出现滚动条 所以将margin设为0去除滚动条*/ background-repeat: no-repeat; /*背景图片小于标签尺寸时 背景图片会在两个放向上重复自己 直到填满整个空间 除非设置了background-repeat 还可在一个方向上重复 background-repeat: repeat-x background-repeat: repear-y*/ background-color: red; /*背景图片小于标签时,且背景图片不重复时 可以看到背景图片和颜色共存的 背景图片在背景颜色的上方*/ background-position: 50% 50%; /*background-position样式可以决定从哪个位置开始绘制这张图片*/ /*如果使用百分比 计算方式(容器的宽 - 图片的宽)× 百分比 超出部分隐藏 (容器的高 - 图片的高)× 百分比 超出部分隐藏 如果仅规定了一个值 那另一个值为50% */ background-size: contain; /*设置图片大小 如果只设置一个值(宽) 那另一个值为auto 如果使用百分比 计算方式为(图片的宽和高 × 百分比)*/ } </style> <body> </body> </html> 图片精灵: <html> <head> <meta charset="UTF-8"> <title>图片精灵</title> <style> /*body{ background-color: black; }*/ /*方案一 span{ display 属性规定元素应该生成的框的类型 display: block; width: 144.285px; height: 144.285px; background-image: url(icons.jpg); background-position: -144.285px -144.285px; 显示第二行第二个图标 } span>i{ display: none; 需要可以显示文字 不需要可以将中间文字隐藏 }*/ /*方案二 .icons{ display: block; width: 144.285px; height: 144.285px; background-image: url(icons.jpg); } .r1c1{ background-position: -144.285px -144.285px; } .ric2{ background-position: -288.57px -144.285px; }*/ /*方案三*/ /*可以随便的设置任意大小*/ /*.icons{ display: block; width: 25px; height: 25px; background-image: url(icons.jpg); background-size: 700% 700%; } .r1c1{ background-position: -50px -50px; } .r1c2{ background-position: -50px -100px; }*/ </style> <!--最终方案--> <link rel="stylesheet" href="style.css">

2017-04-18 00:26:38 81 0 0
阅读详情
  • 1
前往