这次的案列是怎样用css隐藏图片背景的文字内容，我们先使用使用background背景是将图片设为背景显示；然后使用background缩进是隐藏a链接内容和background 

*/ 

2、HTML代码：

h1#logo{ float:left;width:165px;height:60px; background:url(http://www.php.cn) no-repeat 0 0}h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}

登录后复制

案例效果

立即学习“前端免费学习笔记（深入）”；

在浏览器显示结果，大家可跟着给出实例代码思考并完成DIV+CSS实践，在浏览器中测试测试。

重要解释：本来HTML里h1标签内设置了文字内容，但是设置“text-indent:-9999px”样式，实质是让文字向左平移9999px距离，自然在一般分辨率显示屏上无法看到9999px边缘内容，自然使用此CSS技巧实现了文字隐藏同时，背景图片显示正常。

总结

我们让图片作为background、同时上面放上文字，又让文字隐藏，这个对于SEO来说比较实用。但实际操作时候注意图片大小高宽，在设置对象DIV盒子时候注意高度宽度适合，并使用CSS background背景样式、text-indent、css display等样式单词实现。根据案例多实例实践即可学会。如果不想用A锚文本隐藏图片上文字，可以将a标签换成span标签、div标签、em标签均可效果相同。

相信看了这些案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

相关阅读：

background

background

background

登录后复制

以上就是怎样用CSS隐藏图片背景的文字内容的详细内容，更多请关注【创想鸟】其它相关文章！