大家知道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的默认值是啥