div css圖片替換的技巧

大家知道div css圖片替換嗎?下面我們就給大家詳細介紹一下吧!

使用標准的html而不是圖片來顯示文字通常更為明智，除了加快下載還可以獲得更好的可用性。但是如果你決心使用訪問者的機器中可能沒有的字體時，你只能選擇圖片。

舉例來說，你想在每一頁的頂部使用“網頁特效代碼園地”的標題，但你同時又希望這是能被搜索引擎發現的，為了美觀你使用了少見的字體那麼你就得用圖片來顯示了：

這樣當然沒錯，但是有證據顯示搜索引擎對真實文本的重視遠超過alt文本(因為已經有太多網站使用alt文本充當關鍵字)，因此，我們得用另一種方法：

Buy widgets

，那你的漂亮字體怎麼辦呢?下面的css可以幫上忙：

h1

{

background: url(widget-image.gif) no-repeat;

}

h1 span

{

position: absolute;

left:-2000px;

}

現在你既用上了漂亮的圖片又很好的隱藏了真實文本——借助css，文本被定位於屏幕左側-2000像素處。6.css盒模型hack的另一選擇

css盒模型hack被用來解決IE6之前的浏覽器顯示問題，IE6.0之前的版本會把某元素的邊框值和填充值包含在寬度之內(而不是加在寬度值上)。例如，你可能會使用以下css來指定某個容器的尺寸：

#box

{

width: 100px;

border: 5px;

padding: 20px;

}

然後在html中應用：

盒的總寬度在幾乎所有浏覽器中為150像素(100像素寬度+兩條5像素的邊框+兩個20像素的填充)，唯獨在IE6之前版本的浏覽器中仍然為100像素(邊框值和填充值包含在寬度值中)，盒模型的hack正是為了解決這一問題，但是也會帶來麻煩。更簡單的辦法如下：

css:

#box

{

width: 150px;

}

#box div {

border: 5px;

padding: 20px;

}

html:

...

這樣一來在任何浏覽器中盒的總寬度都將是150像素。

相信大家已經學會div css圖片替換了吧!感謝大家對我們網站的支持!

相關推薦：

div css的border的默認值是啥