04.背景图像效果

背景图像效果：

1 URL路径：

1.1 在通过 link 标签引入css文件时，在css中使用 url 路径应该注意目录层次。

background: url(./img/mypicture.jpg); /*表示css文件所在目录的同级img文件夹下的文件*/


backgroudn: url(../img/mypicture.jpg)  /*表示css文件所在目录的上级目录中img文件夹下的文件*/

background: url(../img/mypicture.jpg)  /*表示css文件所在目录的上级目录中img文件夹下的文件*/

• 当没有“点”的时候，也表示同级目录下的文件喽。

---

2 圆角框：

2.1 通过CSS3实现：

• 多背景特性实现圆角框。
• 使用 border-radius 属性实现。

.box{ border-radius:1em;}

• 使用 border-image 属性实现(九分法缩放)

.box{ border-image:url(/img/corners.gif) 25% 25% 25% 25% / 25px round round;}

---

3 投影：

• 通过 box-shadow 属性实现。

img{
        box-shadow: 3px 3px 6px #666;      
         /*水平和垂直偏移、投影的宽度（模糊程度）、颜色*/
    }

---

4 不透明度:

4.1 RGBa:

.alert{
            background-color:rgba(0,0,0,0.8);  /*背景的不透明度是80%*/
        }

5 针对IE的不透明度:

.alert{
            background-color:#000;
            opacity:0.8;
            filter:alpha(opacity=80);  /*proprietary IE code*/
        }

---

6 图像替换:

• 为了使用图片logo，但是又想被搜索引擎爬取，可以使用类似下边的方法：

  
Hello World
  h2 { background:url(hello_world.gif) no-repeat;
        width:150px;
        height:35px;
  }
  span {
      display:none;
  }

• 上边方法的缺点就是许多流行的屏幕阅读器会忽略 display 值为none的元素。