文章/答案/技术大牛

发布

社区首页 >问答首页 >图像替换为font-size: 0

问图像替换为font-size: 0
EN

Stack Overflow用户

提问于 2013-03-06 19:49:07

回答 2查看 1.6K关注 0票数 1

我真的很喜欢用font: 0/0 a杀死文本来替换图像，但我知道它并不是在所有地方都有效。

所以我们还需要

text-indent: -9999px;
overflow: hidden;

就为了这个？

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-03-06 21:02:15

正如Lister先生评论的那样，有很多很多不同的方法来进行图像替换。它们都有好的和坏的一面。有一种技术唯一的缺点是它需要支持伪元素(所以IE8+)。

无额外标记
适用于禁用的图像
适用于透明图像
不需要调整字体大小
不需要调整位置

http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/

.nir {
   height:100px; /* height of replacement image */
   width:400px; /* width of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:inline-block;
   font-size:0;
   line-height:0;
}

票数 1

Stack Overflow用户

发布于 2013-03-06 20:42:52

已更新

您可以使用背景替换图像，并使用填充将实际图像移开。这只是众多解决方案中的一个。

http://jsfiddle.net/gj5F2/2/

Css

div
{
    width: 550px;
    height: 190px;
    overflow: hidden;
}
.img2
{
    background: url('http://www.google.com/logos/2013/ghana_independence_day_2013-1202005-hp.jpg') no-repeat left top;
    padding-left: 550px;
}

HTML

<img class="img1" src="http://www.google.dk/images/srpr/logo4w.png" width="550" height="190" />

<div>
    <img class="img2" src="http://www.google.dk/images/srpr/logo4w.png" width="550" height="190" />
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15246566

复制

相似问题

问图像替换为font-size: 0
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像替换为font-size: 0EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像替换为font-size: 0
EN