/* css注释：display:block是让#logo内A标签成块显示，并以上级100%高度和100%宽度显示
text-indent此属性为CSS 缩进样式，我们设置为负值的9999px，也就隐藏了a标签内文字
这样一来就显示了h1标签背景图片，隐藏了文字又实现了A锚文本超链接
*/
2、HTML代码：
1 2 3 4 |
|
<!-- html注释：这里便于截图观察，我们将HTML代码换行排版 -->
案例效果
在浏览器显示结果，大家可跟着给出实例代码思考并完成DIV+CSS实践，在浏览器中测试测试。
重要解释：本来HTML里h1标签内设置了文字内容，但是设置“text-indent:-9999px”样式，实质是让文字向左平移9999px距离，自然在一般分辨率显示屏上无法看到9999px边缘内容，自然使用此CSS技巧实现了文字隐藏同时，背景图片显示正常。
总结
我们让图片作为CSS背景、同时上面放上文字，又让文字隐藏，这个对于SEO来说比较实用。但实际操作时候注意图片大小高宽，在设置对象DIV盒子时候注意高度宽度适合，并使用CSS background背景样式、text-indent、css display等样式单词实现。根据案例多实例实践即可学会。如果不想用A锚文本隐藏图片上文字，可以将a标签换成span标签、div标签、em标签均可效果相同。
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
什么是js深拷贝和浅拷贝及其实现方式
详解前端响应式布局、响应式图片，与自制栅格系统
a:active加动画点击无效的解决方案
以上就是怎样用CSS隐藏图片背景的文字内容的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
css text-decoration-color属性怎么用
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
