怎样用CSS隐藏图片背景的文字内容

php中世界最好的语言
发布: 2017-11-28 10:40:54
原创
4288 人浏览过

这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示;然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接。下面就是实例案列。

实例案例描述

这里便于观察CSS DIV案例效果,我们就来实现的网站的布局。

扩展阅读:html img图片

1、CSS 代码:

/* css注释:display:block是让#logo内A标签成块显示,并以上级100%高度和100%宽度显示

text-indent此属性为CSS 缩进样式,我们设置为负值的9999px,也就隐藏了a标签内文字

这样一来就显示了h1标签背景图片,隐藏了文字又实现了A锚文本超链接

*/

2、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隐藏图片背景的文字内容的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!