CSS隐藏图片背景上方的文字内容
用法CSS样式躲藏作为背景上方的文字内容


此类问题我们常见于LOGO处用法，我们想让作为背景，而上方放A链接文字内容，但html锚文本功能仍然正常也能鼠标点击用法。

一、用到的CSS单词    -  TOP

按照以上描述，将用法DIV CSS样式单词如下：
1、css background - CSS 背景
2、css text-indent - CSS缩进
3、html a锚文本标签
4、css display:block显示块
5、css width宽度
6、css height高度


以上CSS属性样式单词用法说明
我们用法background背景是将设为背景显示；
用法text-indent缩进是躲藏a链接内容
用法链接标签是对文字设置锚文本链接。


扩展阅读：
1、CSS躲藏内容办法
2、css 背景
3、css背景彩
4、背景
5、css a样式
6、css鼠标指针
7、CSS躲藏超出DIV宽度高度限制内容
8、CSS解决过大撑破撑开DIV布局

二、背景躲藏上方文字实际应用截图    -  TOP

CSS实现上文字躲藏实际用法截图


作为背景而html代码内看不到，但文字也存在，却是文字躲藏显示出，鼠标也能点击指向。

三、实际用法案例    -  TOP

接下来DIVCSS5带领大家实现DIVCSS5网站LOGO布局（实现logo上文字内容躲藏同时超
链接保留）。


实例案例描述
这里便于观看CSS DIV案例效果，我们就来实现DIVCSS5的网站LOGO布局。
LOGO地址：www.divcss5/img201301/divcss5-logo-2013.gif
扩展阅读：html img


css鼠标点击样式1、CSS 代码：

h1logo{  float:left;width:165px;height:60px;  background:url(www.divcss5/img201301/divcss5-logo-2013.gif)  no-repeat  0  0}  /*  CSS注释：  float设置浮动，并设置CSS宽度和CSS高度  CSS背景  为了便于截图我们将CSS代码换行排版  */    h1logo  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学习与资源共享平台         

3、案例效果


躲藏上文字实例截图


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


重要说明：原来HTML里h1标签内设置了文字内容，但是设置text-indent:-9999px样式，实质是让文字向左平移9999px距离，自然在普通辨别率显示屏上无法看到9999px边缘内容，自然用法此CSS技巧实现了文字躲藏同时，背景显示正常。


在线演示：点击进入

四、DIVCSS5总结    -  TOP

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

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。