CSS MASTER读书笔记：背景图像和图像替换

 

背景渐变

body {

background:#ccc url(gradient.gif) repeat-x;

}

 

在站点的每个标题上添加一个符号

h1 {

padding-left: 30px;

background: url(/images/bullet.gif) no-repeat left center;

}

 

最后两个关键字指出图像的位置。除了适用关键字，还可以使用像素或百分数等单位设置背景图像的位置。

如果使用像素，那么图像左上角到元素左上角的距离为制定的距离。

如果使用百分数，使用图像上距图像左上角百分数的点定位到父元素距离左上角百分数的位置。

 

对应于（left，center）的位置的值是（0，50%）

 

尽量不要将像素或百分数等单位与关键字混合使用。

 

圆角框

 

固定宽度的单色圆角框，只需要两个图像：一个图像用于框的顶部，另一个用于底部。

 

 

<div class="box">

<h2>lorem lpsum</h2>

<p>Content</p>

</div>

.box {

width: 418px;

background: #effce7 url(images/bottom.gif) no-repeat left bottom;

}

.box h2 {

padding: 10px 20px 0 20px;

background: url(images/top.gif) no-repeat left top;

}

.box p {

padding: 0 20px 10px 20px;

}

 

设置一个重复显示的背景图像。将底部曲线图像应用到另一个元素上。下面使用框中的最后一个段落元素。

.box {

width: 424px;

background: url(images/bg-tile.gif) repeat-y;

}

.box h2 {

background: url(images/bg-top.gif) no-repeat left top;

padding-top: 20px;

}

.box .last {

background: url(images/bg-bottom.gif) no-repeat 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">

<div class="box-outer">

<div class="box-inner">

<h2>headline</h2>

<p>content</p>

</div>

</div>

</div>

两个顶部图像组成顶部曲线，两个底部图像组成底部曲线和框的主体。底部图像的高度必须与框的最大高度相同；

 

 

.box{

width:20em;

background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;

}

.box-outer {

background: url(images/bottom-right.gif) no-repeat right bottom;

padding-bottom: 5%;

}

.box-inner {

background:url(images/top-left.gif) no-repeat left top;

}

.box h2 {

background: url(images/top-right.gif) no-repeat right top;

padding-top: 5%;

}

.box h2, .box p {

padding-left: 5%;

padding-right: 5%;

}

 

山顶角

可以创建简单的圆角框，而不用角图片。

创建曲线的位图角蒙版，蒙版区域盖住背景颜色，而角区域实际是透明的。当放在有颜色的框上时，就形成曲线形框的效果。

 

<div class="box">

<div class="box-outer">

<div class="box-inner">

<h2>headline</h2>

<p>content</p>

</div>

</div>

</box>

.box {

width: 20em;

background: #effce7 url(img/bottom-left.gif) no-repeat left bottom;

}

.box-outer {

background: url(images/bottom-right.gif) no-repeat right bottom;

padding-bottom: 5%;

}

.box-inner {

background: url(images/top-left.gif) no-repeat left top;

}

.box h2 {

background: url(images/top-right.gif) no-repeat right top;

padding-top: 5%;

}

.box h2, .box p {

padding-left: 5%;

padding-right: 5%;

}

除了使用不同的图像之外，主要的差异是在主框div上添加了背景颜色。如果要修改框的颜色，只需要修改css中的颜色值，不比重新创建任何新图像。

这个方法只适合创建简单的框，但是却提供了很大的灵活性，可以复用。

 

阴影

简单的阴影

工作原理：将一个大的阴影图像应用于容器div的背景。然后使用负值的空白边偏移这个图像，从而显示出阴影。

使用Photoshop创建一个800*800像素的文件，背景层填充一种白色，创建一个新层并填充白色，向左上角移动4或5个像素，然后对这个层应用4或5个像素的阴影，shadow.gif。

<div class="img-wrapper"><img src="photo.jpg" width="300" height="300" /></div>

一定要将代码放在一行上，而且在div我图像之间不能有空格。IE5.5有一个空格bug，如果代码不在同一行上，这个bug会在图像和阴影之间造成间隙。

.img-wrapper {

background: url(images/shadow.gif) no-repeat bottom right;

clear: right;

float: left;

}

.img-wrapper img {

margin: -5px 5px 5px -5px;

}

还可以给图像添加边框和填充，产生相片边框的效果

.img-wrapper img {

background-color:#fff;

border: 1px solid #a9a9a9;

padding: 4px;

margin:-5px 5px 5px -5px;

}

这些做法对大多数符合标准的浏览器都可以，但在IE6中要做修改

在.img-wrapper中添加position: relative

在.img-wrapper img中添加display: block; position: relative;

这种做法不会在IE5.5上显示填充

 

Clagnut的阴影方法

.img-wrapper {

background: url(images/shadow.gif) no-repeat bottom right;

float: left;

line-height: 0;

}

.img-wrapper img {

background: #fff;

padding: 4px;

border: 1px solid #a9a9a9;

position: relative;

left: -5px;

top: -5px;

}

 

模糊阴影

通过使用png和蒙版并添加一个无语义的div，可以实现这种效果，可以创建一个具有alpha透明度的png来盖住阴影图像的边缘。

首先在Photoshop中建立800*800的文件，删除背景色的内容，在左边缘和上边缘建立一个5像素宽的选取，从这个选区中填入从白色到透明的渐变，存为24位的mask.png

 

老版本的IE不支持png透明度。为了适应这些浏览器，要创建一个替代图像（一个简单的gif蒙版，左边和顶部填充5像素宽的白色）

<div class="img-wrapper">

<div>

<img src="photo.jpg" width="300" height="300" />

</div>

</div>

.img-wrapper {

background: url(images/shadow.gif) no-repeat right bottom;

float: left;

}

.img-wrapper div {

background: url(images/mask.png) no-repeat left top !important;

background: url(images/mask.gif) no-repeat left top;

padding: 0 5px 5px 0;

float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac*/

}

.img-wrapper img {

background-color: #fff;

border: 1px solid #a9a9a9;

padding: 4px;

}

 

IE 5.5和更高版本提供了一些专有的CSS，可以实现png透明度：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mask.png',sizingMethod='crop');

这些专有规则应该放在单独的css文件中，对非IE浏览器隐藏。

 

css透明

.alert {

background-color: #000;

opacity: 0.8;

filter: alpha(opacity=80);

}

 

CSS图像替换

使用专用字体的文本图像替换html文本

 

FIR

<h2><span>Here</span></h2>

h2 {

background: url(here.gif) no-repeat;

width: 150px;

height: 35px;

}

span {

display: none;

}

可访问性设置会导致某些浏览器无法显示。

 

Gilder/Levin方法

<h2><span></span>Here</h2>

h2 {

widht: 150px;

height: 35px;

position: relative;

}

h2 span {

background: url(here.gif) no-repeat;

position: absolute;

width: 100%;

height: 100%;

}

必须使用实色图片

 

IFR

使用JavaScript搜索文档，找到特定元素或者具有特定类名的元素中的所有文本，将文本放到一个重复的flash文件中。然后JavaScript将文本替换为flash文件。

这种技术的主要问题涉及装载时间，页面必须完全装载，然后JavaScript才能替换文本。