第四章--背景图像效果

第四章 背景图像效果


web是一种视觉效果非常丰富的媒体，没有image就没有网页设计师。本章讲的是一系列示例解释如何使用背景图像创建各种有意思的有用的技术。 


本章介绍的内容：
○固定宽度和可变宽度的圆角框
○滑动门技术
○多个背景图像和border-radius属性
○css投影
○不透明度和RGBa
○让PNG适用于老的IE版本
○视差滚动
○图像替换


4.1背景图像基础


学过，不解释。。。有一点是制作背景图像，做一个很细很高的图像，让它渐变颜色，直到某种颜色， 当内容很长的时候就可以用背景图片转换成背景色让人看不出来。


怎么钩啊，怎么制定图像的位置，已经学过了。
像素和百分比不能混用， 否则可能使CSS失效。
attention:
对于    background-position:像素px/百分比%;的不同。






4.2.1圆角框


学过，书上讲过的都做了，在CSDN上面有发表。 再不说了。


它的代码，不知道是有多优秀， 或者和中国人桌的有什么不一样的：


.box{
width:424px;
background: url(title2.gif) repeat-y;
}
.box h2{
background:url(top2.gif) no-repeat left top;
padding-top:20px;
}
.box .last{
packground:erl(bottom.gif) nor-epeat left bottom;
padding-bottom:20px;
}
.box h2, .box p{
padding-left:20px;
padding-right:20px;
}


<div class="box">
<h2>Headline</h2>
<p class="last">Content</p>
</div>


另一种完全自适应的圆角框在这本书中叫   灵活的圆角框
用两个图像来组成顶部和底部的曲线，用的是两个互相重叠的图像。 一个图像在另一个图像上滑动，就实现了扩展框的效果，有时候被称为滑动门技术(sliding doors technique)。




 <div class="box">/*bottom-left*/
   <div class="box-outer">//bottom-right
   <div class="box-inner">//top-left
   <h2>Headline</h2>//top-right
   <p>Content</p>
    </div>
   </div>
 </div>
两个顶部图像组成顶部曲线，两个底部图片组成底部曲线和框的主体，如图所示。 因此底部图像的高度玉矿的最大高度相同。 分别将这些图像命名。 
思路： 首先将bottom-left图像应用于主框div，将bottom-right应用于外边的div。 接下来将top-left.gif应用于内的div将top-right.gif应用于标题。 最后添加一些内边，一边在内容周围形成一点空白。




CSS代码：
.box{
width:20em;
background:url(bottom-left.gif) #effce7 no-repeat left bottom;
}
.box-outer{
background:url(bottom-right.gif) #effce7 no-repeat right bottom;
padding-bottom:1em;
}
.box-inner{
background: url(top-left.gif) no-repeat left top;
}
.box h2{
background: url(top-right.gif) no-repeat right top;
padding-top:1em;
}
.box h2,box p{
padding-left:1em;
padding-right:1em;
}
示例中是以em为单位的，所以在增加文本时候框会伸展。 当然也可以用百分比，使框根据浏览器的大小收缩。 这是弹性和流式布局的主要原则之一。 




   4.2.2山顶角（mountaintop corner）
  
 山顶角是简单灵活的概念，是由www.simplebits.com的DAnCederholm首创的。 他是畅销书《WEB标准实战》（人民邮电出版社2008年出版）的作者。 
  不创建有颜色的角图像，而是创建曲线形的位图角蒙版。 角蒙版区域遮住你正在使用的背景色，而角区域实际上是透明的。 当放在有颜色的框上面的时候，他们呢形成曲线的效果。  应为这些角蒙版是位图所以对于小曲线的效果最好，如果是大曲线，它会出现锯齿不好看。
蒙版：标记方法几乎与上面的代码一样。 只是给div框加上了背景颜色。 


  1.多个背景图像
     CSS3 就可以实现非常简单的语法的添加多个背景图像。 与一般背景图像相同的形式， 差异是不定义一个背景图像而是使用任意数量的背景图像。 
代码：
.box{
background-image: url(top-left.gif),url(top-right.gif),url(bottom-left.gif),url(bottom-right.gif);
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}


<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>


    
 现在的Sfari从1.3开始，FireFox和Opera的最新版本也开始支持这个属性。 IE目前还不支持多个背景图像，IE用户看到的只是直角框。 


2.border-radius
    目前有很多高水平的计算机游戏使用动态纹理映射，，图形技术已经普及到这种程度， 所以浏览器本身应该能够绘制简单的圆角框，根本不需要我们添加图像。 是的 YES终于有了CSS3的border-radius这种属性， 现在我们只需要设置边框的角半径，浏览器就可以实现这种效果。
.box{
border-radius:1em;
}
这是一个新属性，对于他的实现方式现在还有争议。当前Firefox和Safari支持这个属性。 
.box{
-moz-border-radius:1em;/*Firefox Mozilla浏览器前缀*/
-webkit-border-radius:1em;/*Safari浏览器前缀*/
border-radius:1em;
}


2.border-image
CSS3的最后一种新特性 border-image属性。允许制定一个图像作为元素的边框。 
把一个指定的图像分为九部分，浏览器会根据适当的部分作为边框的对应部分。 这种技术叫做九分法放缩（nine-slice scaling）,有助于避免在调整圆角框大小的时候出现的失真。
.box{
-webkit-border-image:url(corners.gif)
25% 25% 25% 25%/25px round round;
}
Safari支持这个属性。 Firefox3.5和Opera9.5都支持这个属性。




4.3投影
很流行，很强的设计特性，增加深度，增加立体感。 不用ps也能做出来的投影效果，而且不需要修改底层的图像。很方便， 管理更新等，不需要每次都用ps一张张的处理图片。如果日后想去掉投影也很便捷。 
原理是：先讲一个很大的图像应用于div的背景，然后通过负的编剧便宜这个图像，从而显示出投影。（看得我稀里糊涂的，还是不知道怎样产生的投影）
方法一：
貌似非常简单那：
<div class="img-wrapper"><img src="dunstain.jpg" width="300" height="300" slt=""/></div>
.img-wrapper{
background:url(show.gif) no-repeat bottom right;//有投影效果的投影图像应用于块的背景，并且要使它和最大的图像一样。
clear:right;
float:left;
position:relative;/*IE6中添加的*/
}
为了露出投影图像并产生投影效果，使用负的外边距偏移这个图像。 


.img-wrapper img{
margin:-5px 5px 5px -5px;
border:1px solid #a9a9a9;/*为了使它有照片的效果加上的框*/
padding:4px;/*加上内边距，产生类似照片边框的效果*/
display:block;
position:relative;/*IE6中添加的*/
}
这种方案对于大多数符合标准的浏览器都是有效地。 但是在IE6中要产生相同的效果，还要添加两个简单规则。
方法二：
来自Clagunt的投影方法，与上面的方法很相似只是没有用负的外边距而是用相对定位来实现的偏移图像。 
貌似非常简单那：
<div class="img-wrapper"><img src="dunstain.jpg" width="300" height="300" slt=""/></div>
.img-wrapper{
background:url(show.gif) no-repeat bottom right;//有投影效果的投影图像应用于块的背景，并且要使它和最大的图像一样。
float:left;
line-height:0;
}
.img-wrapper img{
background:#fff;
border:1px solid #a9a9a9;/*为了使它有照片的效果加上的框*/
padding:4px;/*加上内边距，产生类似照片边框的效果*/
    position:relative;
left:-5px;
top:-5px;
}
box-shadow
以上的方法虽然可以达到效果但是很麻烦。 但是浏览器可以本身创建投影，就不需要PS滤镜图像了。这更方便现在的CSS3支持这种做法。 
box-shadow这个属性需要四个值，垂直偏移和水平偏移，投影的宽度（也就是模糊程度）和颜色。 
img{
box-shadow:3px 3px 6px #666;
-moz-box-shadow:3px 3px 6px #666;/*使用其他浏览器扩展*/
-webkit-box-shadow:3px 3px 6px #666;
}


现在这还是实验性的CSS3属性，但是很快就广泛支持了。这个属性更让人兴奋的是可以与border-radius属性配合，可以做出有投影的圆角框。
作者很苦恼的说用户常常注意不到你到底有没有使用阴影，他们注意不到这点。 
4.4不透明度
用不透明度可以设计的效果更丰富，很酷还能改进站点的易用性。


1.css的不透明度
大多数现代的浏览器支持不透明度已经有一段时间了，但是大多数的设计者不知道使用它。。。IE的蓝版本不支持他，但是解决方法很简单。
一个弹出警告框的例子：
.alert{
background-color:#000;
border-radius:2em;/*画圆角框*/
opacity:0.8;//不懂是什么东西
filter:alpha(opacity=80);/*为IE支持的编码*/
}


2.RGBa//解决透明度高低引起的辨认问题
RGBa是一种同时设置颜色和不透明度的机制，RGB分别代表颜色 R     G      B     a代表的是alpha透明度。使用RGBa的方法如下：
.alert{
background-color:rgba(0,0,0,0.8);/*前三种是红蓝绿的颜色值，在JAVA的AWT中有接触； 后面的0.8表示的是不透明度是80%，透明度是20%。1表示100%不透明，0表示完全透明*/
border-radius:2em;
}


3.PNG透明度
png文件格式的最大优点之一就是它支持alpha透明度。这可使设计具备真正的创意。 但是IE6不直接支持PNG透明度，而IE7和IE8支持。 
IE6中使用的支持透明的方法是用AlphaTmageLoader过滤器。 把它放在Ie6专用的样式表中：
.img-wrapper div{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='xxx.png',sizingMethod='crop');
background:none;
}
第一个规则是使用专用的过滤器加载PNG并应用alpha透明度。 原来的背景图像人会显示，所以第二个规则用来影藏原来的背景图像。
还有另一种条件注释的额专用代码，我们可以为IE的特定版本提供特定的样式表。
在页面顶部添加以下代码：
<!--[if ie 6]>
<link rel="stylesheet"type="text/css" herf="ie6.css"/>
<![endif]-->
上面的技术问题是，对于每个要使用的透明PNG，都必须包含这段代码。左移用起来有点麻烦。
另一种方法就是IE PNG fix技术。Microsoft专用的CSS扩展---行为（behavior）。下载适合的。htc文件并在IE的专用样式引用它，就可以在任何元素上启用PNG透明度。 
例如：
img,div{
behavior:url(iepngfix.htc);
}
下载.htc文件的网站：www.twinhelix.com/css/iepngfix.
4.css视差效果
在www.silverbackapp.com网站上改变窗口大小，试试效果。会看到一种奇怪的效果，背景图像回忆稍微不同的速度移动，让人感觉这个页面有深度。 这种现象称为视差滚动。
实现这种效果，就要首先创建几个不同的背景图像。中景和前景图像可以互相覆盖并该在背景上，同时不会把师徒弄的模糊。 


主背景应用在boby元素上。但是我们如果不适用CSS3的多个背景的图像特征，就需要加两个新元素来应用背景。 页面的内容需要出现在这些元素的前面，让用户可以交互，可以吧前景div放在内容前面，但这回挡住内容，所以标记的结构应该像这样：


<body>
<div class="midground">
<div class="foreground">
<p>your content will go here!!</p>
</div>
</div>
</body>


css代码：
body{//在body上添加主背景，把图像平铺
background-image:url(bg-rear.jpg);
background-repeat:repeat-x;
background-color:#d3ff99;
background-position:20% 0;/*图像相对于窗口大小水平偏移20%*/
}
对中景和前景采取同样的办法： 但是为了让器移动更快有层次感 中景位置设置为40%，前景设置为150%。 你可以随意调整


 
中景：
 .midground{
background-image:url(bg-min.jpg);
background-repeat:repeat-x;
background-color:transparent;
background-position:40% 0;
}


前景：
  .foreground{
background-image:url(bg-front.jpg);
background-repeat:repeat-x;
background-color:transparent;
background-position:150% 0;
}
/*当水平调整窗口的大小时，背景的藤蔓以不同的速度移动，产生深度的感觉*/




4.5图像替换
HTML文档有很多优点，搜索引擎可以搜到它。所以尽可能地使用HTML是个好想法，但是不是所有的文本都是可以用HTML实现的额，有时候避免不了使用文本的图像。 
但是有个方法就是你可以将文本添加到文档中，然后使用CSS的图像替换在文本隐藏的位置显示一个替换的图像。这样搜索引擎就可以搜到。但是此方法也有缺憾，就是一些流行的图像替换方法对于屏幕阅读器是无效的，，如果关闭图像打开CSS就会出现内容流失。 所以尽可能的避免使用图像替换，但是作者坚信在某些情况下他适合的。
1.FIR
是有Todd Fahrner开创的是最早可能流行的图形替换方法，在历史上有重要意义。基本概念很简单，要把替换掉的文本放在span标签中。 
<h2><span>HEllO WORLD!</span></h2>
然后将图像用于背景用于标题元素：
h2{
background:url(hello-world.gif) no-repeat;
width:150px;
height:35px;
}
然后将span的display值设置为none,从而隐藏span的内容。 
span{
display:none;
}
这种方法很有效，但是很多流行的屏幕阅读器会忽略那些display为none或者visibility的值为hidden的元素， 因此会忽略这个文本造成完全的可访问性问题。 所谓的屏幕阅读器就是将屏幕内容转换成声音或者布来叶盲文显示的软件。  
2.Phark
Mike Rundle发明的一种适合于屏幕图像阅读器的图像替换技术，而且不需要定义额外的DIV:
<h2>
Hello World
</h2>
原理很简单，对标题进行很大负值的文本缩进。
h2{
text-indent:-5000px;
background:url(hello worls.gif) no-repeat;
width:150px;
height:35px;
    }


    对于站点的导航和重要信息，应该避免使用这个方法。 
3.sIFR


图像替换解决的主要问题之一就是大=大多数计算机上缺少可用的字体。 他们发明了一种避免生成文本图像的更新颖的一种方法。 ：用FLASH文件替换文本 这种党法叫IFR