背景漸變
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才能替換文本。