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

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

实例案例描述

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

扩展阅读：html img图片

1、CSS 代码：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}

/* 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中文网其它相关文章！

html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容相关推荐

html图片靠右浮动文字左侧环绕,CSS实现模拟float: center文字左右环绕图片的效果...
什么是文字左右环绕图片?就是下图的效果: 效果的CSS代码可以点击这里查看在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果. 经常会有小伙伴问:有f ...
html图片靠右浮动文字左侧环绕,CSS 模拟float实现center文字左右环绕图片的效果...
什么是文字左右环绕图片?就是下图的效果: 效果的CSS代码可以点击这里查看在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果. 经常会有小伙伴问:有 ...
html图片后边自动底部对齐,css实现图片与文字底边对齐
css实现图片与文字底边对齐通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题. ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
html文字段落缩进,CSS text-indent段落首行文字缩进分享
DIV CSS text-indent段落首行文字缩进,CSS段首缩进,可控制缩进距离样式教程篇让每个段落首行开头文字缩进,如缩进2个文字距离样式,我将用到text-indent属性样式. .div ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
django中html中图片路径怎么写,django css样式,图片路径问题解决方案
在用Django 做项目时,如果在本地调试的情况下,我们会开启 settings.py 中的 DEBUG = True 同时我们还会做如下操作: 1. 设置 STATIC_ROOT = os.path ...
html 图片上放置按钮,用CSS在图片上再加一个小按钮
很简单的,嗯,就是要做成这样的: 用CSS,当然得用层了,就是在图片上再加一个层,用来放那个按钮,按钮又有两种方式可以放,一种是直接用图片img标签,一种是通过背景图片放上去.这里我们就用背景图片这个 ...
怎么修改背景图片大小的HTML代码,css如何改变背景图片大小？
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...

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

html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容相关推荐

最新文章

热门文章