• 谁是女排最大核心?国际排联给出答案 她当选不意外 2020-02-09
  • 新疆优秀出版物上网工程 2020-02-08
  • 智媒云图(Intell Vision):植物识别 2020-01-25
  • 【玛沁天气】最新玛沁今天天气,实时提供玛沁气温、空气质量、24小时天气预报、生活指数查询 2020-01-25
  • 月薪过万白领辞职回乡养鸡 亏数十万后回城找工作 2020-01-20
  • 拉美国家新闻官员与记者宁夏考察采访活动结束 2020-01-06
  • 荆楚网互联网出版机构 2020-01-06
  • 北京限价房项目开闸 百亿货值将入市 ——凤凰网房产北京 2019-12-08
  • 秘鲁侨界研讨两岸关系和平发展 2019-12-02
  • 西安紫云溪小区深夜有人竟高空扔粪便 律师:违法行为 2019-11-29
  • 罗品禧的专栏作者中国国家地理网 2019-11-29
  • 市委把全国两会精神原汁原味传达到基层 2019-11-28
  • 西南铁路端午假期发送400余万人次 两人不文明乘车或受失信惩戒 2019-11-20
  • 四件汉白玉螭头回归圆明园 2019-11-20
  • 人的本质的演变规律:从原始母系氏族社会的公有者经过父系氏族社会私有和公有双重所有者而演变为私有制阶级社会的私有者,然后经过现代社会公有和私有双重所有者... 2019-11-06
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    使用香港买马资料大全样式隐藏图片作为背景图片上方的文字内容

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

    一、用到的CSS单词   -   TOP

    根据以上描述,将使用香港买马资料大全样式单词如下:
    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链接内容
    使用<a>链接标签是对文字设置锚文本链接。

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

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

    CSS实现图片上文字隐藏实际使用截图
    CSS实现图片上文字隐藏实际使用截图

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

    三、实际使用案例   -   TOP

    接下来香港买马资料大全带领大家实现DIVCSS5网站LOGO布局(实现logo图片上文字内容隐藏同时超链接保留)。

    实例案例描述
    这里便于观察香港买马资料大全案例效果,我们就来实现DIVCSS5的网站LOGO布局。
    LOGO图片地址://www.ziixf.tw/img201301/divcss5-logo-2013.gif
    扩展阅读html img图片

    1、CSS 代码

    1. h1#logo{ 
    2. float:left;width:165px;height:60px; 
    3. background:url(//www.ziixf.tw/img201301/divcss5-logo-2013.gif) no-repeat 0 0}
    4.  
    5. /* CSS注释 float设置浮动,并设置CSS宽度CSS高度 CSS背景 
    6. 为了便于截图我们将CSS代码换行排版 
    7. */ 
    8.  
    9. h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}
    10.  
    11. /* css注释:display:block是让#logo内A标签成块显示,并以上级100%高度和100%宽度显示 
    12. text-indent此属性为CSS 缩进样式,我们设置为负值的9999px,也就隐藏了a标签内文字 
    13. 这样一来就显示了h1标签背景图片,隐藏了文字又实现了A锚文本超链接 
    14. */ 

    2、HTML代码

    1. <h1 id="logo"> 
    2. <a href="//www.ziixf.tw/" title="DIVCSS5:DIV CSS学习教程与资源分享平台"> 
    3. DIV+CSS学习与资源分享平台 
    4. </a> 
    5. </h1> 
    6.  
    7. <!-- html注释:这里便于截图观察,我们将HTML代码换行排版 --> 

    3、案例效果

    实例案例截图
    隐藏图片上文字实例截图

    在浏览器显示结果,大家可跟着DIVCSS5给出实例代码思考并完成香港买马资料大全实践,在浏览器中测试测试。

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

    在线演示点击进入

    四、DIVCSS5总结   -   TOP

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

    如需转载,请注明文章出处和来源网址://www.ziixf.tw/jiqiao/j438.shtml

  • 谁是女排最大核心?国际排联给出答案 她当选不意外 2020-02-09
  • 新疆优秀出版物上网工程 2020-02-08
  • 智媒云图(Intell Vision):植物识别 2020-01-25
  • 【玛沁天气】最新玛沁今天天气,实时提供玛沁气温、空气质量、24小时天气预报、生活指数查询 2020-01-25
  • 月薪过万白领辞职回乡养鸡 亏数十万后回城找工作 2020-01-20
  • 拉美国家新闻官员与记者宁夏考察采访活动结束 2020-01-06
  • 荆楚网互联网出版机构 2020-01-06
  • 北京限价房项目开闸 百亿货值将入市 ——凤凰网房产北京 2019-12-08
  • 秘鲁侨界研讨两岸关系和平发展 2019-12-02
  • 西安紫云溪小区深夜有人竟高空扔粪便 律师:违法行为 2019-11-29
  • 罗品禧的专栏作者中国国家地理网 2019-11-29
  • 市委把全国两会精神原汁原味传达到基层 2019-11-28
  • 西南铁路端午假期发送400余万人次 两人不文明乘车或受失信惩戒 2019-11-20
  • 四件汉白玉螭头回归圆明园 2019-11-20
  • 人的本质的演变规律:从原始母系氏族社会的公有者经过父系氏族社会私有和公有双重所有者而演变为私有制阶级社会的私有者,然后经过现代社会公有和私有双重所有者... 2019-11-06
  • 七星彩2072期超长规律 福建31选7 聊天赚钱是真的吗 青海快三怎么预测 财经新闻股票行情查询上证指数大北农走势 盛世北京pk赛车开结果 体育nba比分直播 c罗皇马总进球 踢球者足球即时指数世界杯 彩金捕鱼掉落红包