重走一边CSS（四）

对image标签的滥用导致纯修饰性的图像把页面弄乱了，好在我们能够在页面上显示图像，为不需要，而不需要让图像成为标记的一部分。实现方法是将图像作为背景添加到现有的元素中

---

背景图像基础

• h1 {
  padding-left: 30px;
  background-image: url(/img/bullet.gif);
  background-repeat: no-repeat;
  background-position: left center;
  }
  
  • h1 {
    background: #ccc url(/img/bullet.gif) no-repeat left center;
    }
• h1 {
  padding-left: 30px;
  background-image: url(/img/bullet.gif);
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
  
  • h1 {
    background: #ccc url(/img/bullet.gif) no-repeat 0 50%;
    }
    
    
    

圆角技术

• css3中已经提供了border-radius:的属性来设置圆角。关于使用背景图片来设置圆角的想法，可以参考一下，为解决其他问题的思路！
  
  • 设置三个嵌套，最外层放 中间平铺的的图片 中间的块放置下圆角 最里面的放上圆角。
  • 滑动门技术，四个角分别设置不同的背景图片 可以 解决方法1中，宽度必须固定的限制。
  • 山顶角，不过总体还是使用不同的图片 使不同的区块显示不同的颜色 不适合较大的区块。

多个背景图像和border-radius属性

• 多个背景图像

.box {
    background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
}

• border-radius

.box {
    borer-radius: 1em;
}

CSS投影

• CSS3中的box-shadow属性可以很简单的做到投影。
• 这个属性需要四个值
  
  • 水平平移 垂直平移 投影的宽度（也就是模糊程度） 颜色
  • img {
    box-shadow: 3px 3px 6px #666;
    }
    

不透明度和RGBa

• 适当地使用不透明度可以让设计的效果更丰富。对于相互重叠的元素，还可以用它显露下面的元素
  
  
.box {
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=50); /*proprietary IE code*/
}

• RGBa是一种同时设置颜色和不透明度的机制。RGB代表红色、绿色和蓝色，a代表alpha透明度
  
.box {
background-color: rgba(0,0,0,0.8);
}


让PNG适用于IE的老版本

• PNG文件格式最大的特点就是它支持alpha透明度
  
.img-wrapper div {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/shadow2.png',sizingMethod='crop');
background:none;
}


视差滚动

图像替换