html中隐藏a标签的文字并显示背景图片-kb88凯时官网登录

来自：kb88凯时官网登录-d88尊龙官网手机app

时间：2019-10-08

阅读：

在前端web的设计中，有时候为了seo需要做一些不合常理的规划，所以在我们这里做seo的小组经常和做前端的小组干仗的。今天就说一个seo小组提出的html前端设计方案中的一个小需求，给大家参考一下。

需求介绍

1、给a标签加入背景图片，并显示背景图片

2、a标签要正常的写法，在源码中不能改变其代码的格式。

3、在浏览器的展示中，要把a标签的文字隐藏掉，只展示背景图片，不展示文字

kb88凯时官网登录的解决方案

上面的需求主要就是说出一点，隐藏掉a标签的文字，并不是隐藏掉a标签，所以我们可以用css来实现。

html代码

免费资源网

css代码

a{
    background-image: url(/uploads/image/img/logo.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 70px;
    display: block;
}

显示效果：

根据上面的显示结果，可以看到a标签的文字还是存在的，我们该如何把文字隐藏掉呢？

给a标签的css属性加入，'text-indent'

text-indent：属性规定文本块中首行文本的缩进。

css代码

a{
    background-image: url(/uploads/image/img/logo.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 70px;
    display: block;
    text-indent: -9999px;
}

显示效果

这次示显结果中，a标签的文字已经消失掉了(其实是被缩进到了左边)

完整的代码示例：

以下代码，你们复制到本地在浏览器中进行查看，也可以自己编辑看一下效果。

    
    document
    
    免费资源网

标签 html ps制作艺术文字 ps抠图换背景 ps制作立体文字

html是一种非常流行的网页编程语言，它可以让网页变得生动、多彩。在编写html代码时，注释起到了至关重要的作用。本文将介绍html注释的作用、语法和应用技巧，以指导读者正确地使

2023-04-21 14:35:08

html是一种标记语言，它被用于在web浏览器中显示各种文本。使用html可以添加各种格式和样式，如插图、链接和列表等。在本文中，我们将介绍如何使用html设置文本格式和样式。html

2023-04-13 20:51:24

html跳转是指从一个网页链接跳转到另一个网页的过程，也可以是同一个页面内部的跳转，比如从文章的顶部跳转到底部。下面我们一起来看一下html跳转的方法和技巧。一、超链接跳转

2023-04-13 20:51:01

在网页设计中，有时候我们需要使用图片作为背景来美化网页。html提供了多种方法来设置图片背景，本文将介绍使用css的background属性来设置图片背景的方法。一、使用background-

2023-04-13 20:49:50

html与pdf是两种常见的文档格式，html用于在web浏览器中呈现内容，而pdf用于打印和文档共享。有时我们需要将html转换成pdf或将pdf转换成html以适应不同的需求。本文将介绍几种

2023-04-13 20:48:38

javascript和html是网页开发中最基础的两种语言，学习它们，将为你成为一名优秀的网页开发者打下坚实的基础。在本文中，我们将讨论如何学习修改js和html。一、学习htmlhtml是一种

2023-04-13 20:47:29

所谓的高度塌陷，意即当给子元素设置浮动时，其父元素高度会丢失的情况。通过实际代码进行演示：

2022-06-08 21:58:30

html5 d88尊龙官网手机app官网地址使用hbuilder开发工具开发：实现可对android机进行控制和获取资源
说明：io模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过

2022-06-08 21:57:06

由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码

2022-05-28 21:18:45

问题：canvas绘制图片，图片变模糊设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。
我拿下面一张

2022-05-10 21:40:46

该文章已经讲的特别细致了，该篇仅以此记录动效过程中各点的计算。1.fedisplacementmapfedisplacementmap 实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。遍历原

2022-04-27 21:47:56

目录抖音logo结构制作思路如何在一个伪元素中一笔画出整个音符图案呢？开搞开搞打地基画1/4圆环画半圆画长条画半径稍大一些的1/4圆环拆分颜色通过变量获取加个动画最后大家好

2022-04-27 21:47:45

本人找到了六个html登录页面，感觉还行，也挺好看的。1.效果一：代码：

2022-04-27 21:47:26

前言身为一个程序员竟然沉迷游戏，wtf？？？都怪腾讯前几天出了一款叫做寻仙的手游，作为曾经的资深玩家，小v君犹豫再三还是忍不住入坑了。入坑了怎么不去打游戏，还在这里发文章？不不不

2022-04-04 20:00:48

目录一、文本标签控制1.标题段落标签1.1标题标签1.2段落标签

2.文本格式化标签2.1换行标签
2.2水平标签

2.3字形标签2.4

标签2.5标签3.特殊字符标签

2022-04-04 20:00:33

最近在某思看到这样一个问题：需要绘制一个自适应尺寸的菱形，并且还有边框，一般在流程图中很常见，效果如下如果没有边框的话，用 css clip-path 也能很方便的裁剪出一个菱形，但是边

2022-03-29 20:08:07

本学期在软件设计大作业时要实现一个粘性页脚功能，即不管页面内容怎么变，页脚始终要滑到页面的最下方才能出现。本次作业采用bootstrap框架网上方法1、html标签将html显示高度

2021-12-28 23:24:56

前言前段时间写到h5获取用户当前位置，百度了好多种办法都没实现，包括h5自带的方法，具体问题不知道出在哪里了，基本都是报错啥的，下面一起看看吧~一、使用h5自带的获取位置先使用n

2021-12-28 23:24:45

content-typecontent-type（mediatype），即是internet media type，互联网媒体类型，也叫做mime类型。在互联网中有成百上千中不同的数据类型，http在传输数据对象时会为他们打上称为mi

2021-12-28 23:24:36

rfc2376 文档定义了application/xml 和 text/xml 媒体类型。rfc7303 文档也定义了application/xml 媒体类型。rfc3023 文档一次定义了application/xml 和 text/xml 等所

2021-12-28 23:24:18

关于html5调用音视频等多媒体硬件的api已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和ai的浪潮，我觉得软硬结合的时机已经成熟。那我们就

2021-12-28 23:24:07

1、form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会

2021-12-28 23:23:58

特殊符号（1）什么是特殊符号？特殊符号就是网页上一些比较特殊的符号。（2）为什么需要特殊符号？因为有时候我们需要特殊符号，比如：把html代码显示在网页上。（你

2021-12-28 21:32:16

html怎样设置select默认不选中默认情况下 select 标签会选中第一个值作为默认值，当然我们也可以自己定义默认值。但我们现在的需求是不想选中任何默认值，有一种比较好的方法不

2021-12-25 22:13:52

1 简单的读取图标使用bootstrap读取图标以表示元件加载状态，这些读取图标完全使用html，css，而没有使用到javascript。它们的外观、对齐以及尺寸都可以通过通用类来自定义,但您

2021-12-12 08:31:11

html添加字体删除线1、用“”标签正常文本

~~删除线文本~~

~~2021-12-10 17:10:36~~

一文了解bootstrap中的多种图片轮播效果

1 轮播组件轮播（carousel）是一种幻灯片放映组件，用于在元素、图像或文本幻灯片（如旋转木马）之间循环播放。carousel是一个幻灯片，用于循环播放一系列内容，使用css3d转换和一点javas

2021-12-02 20:36:48

小区后台管理系统项目前端html页面模板实现示例

目录登录小区管理系统d88尊龙官网手机app主页小区管理菜单房产管理菜单业主信息管理菜单停车位管理菜单服务管理菜单资产管理菜单收费管理菜单管理员管理菜单系统设置项目结构：主要代码展示：登录

2021-11-27 22:49:59

深入讲解bootstrap中手风琴组件的使用方法（实例）

1 简单例子手风琴（accordion）组件非常类似于选项卡，只不过它不是横向排列，而是竖向排列，结合自带的javascript插件无需手写js就可以实现折叠的垂直内容。手风琴通常用于后台面板

2021-11-27 10:08:26

html5同时支持多端sdk的小技巧

需求在实际项目中，我们通常会需要做一些跨多平台的页面。比如说一个活动页面，需要在微信小程序里展示，也需要在自家公司的app里面展示，还需要在支付宝等平台里面展示。这时候一

2021-11-21 22:33:13

css设置背景图片不重复的方法

今天有小伙件来咨询一个关于css中设置背景图片不重复的小问题，给他解答的同时顺便写一下教程，详细介绍一下css如何设置背景图片，以及设置背景图片的显示方式等。css设置背景图

2019-10-05 22:34:57

photoshop设计ui界面中的抽象花朵背景图片

在我们制作界面的时候经常会看到网上有很多的绚丽的界面他们的图形都非常炫酷。如何才能快速的制作出这样效果呢？那么今天micu教大家如何使用2部方法制作炫酷的app界面。喜欢

2019-08-18 22:01:04

ps设计晶格化背景风格运动app软件界面图片

在界面设计中我们经常会看到像晶格化效果的背景样式。让界面看起来丰富而有细节。那么这样的效果是用形状工具绘制出来的呢？还是有其他什么简单的方法？所以这一期micu教大家图

2019-08-18 21:35:06

合成炫酷城市背景人像特效图片的ps教程

今天我们要教大家一个神奇教程——用笔刷、现代建筑、超现实灯光打造酷炫的人物特效。本教程的目的当然不是让你欣赏楚楚动人落雁沉鱼的异国美女，而是教你如何用看

2019-08-15 23:33:52

javascript 获取某个a标签的href并进行分解

有些时候，我们并不能完全掌握网页的代码编辑权，如用bsp博客，但是又想从中修改某些参数，或者想获得某些信息，那怎么办呢？本文将以实例的形式，介绍如何获得网页中某个a标签中的href，并

2019-07-29 23:02:13

1、 html显示网页标题 < title >title标签在搜索引擎中占有非常重要的地位，最好放在meta标签之前，这样更有利于网站的排名。有些搜索引擎会用title标签内内容的字母优先权进行

2019-07-03 07:52:39

帝国cms怎么统计栏目信息数量？totaldata标签的用法

帝国cms统计栏目信息数量就是用很简单的[totaldata]标签即可实现！标签名称：网站信息统计 (totaldata)格式：[totaldata]栏目id,操作类型,时间范围,统计类型[/totaldata]参数说明

2019-06-26 20:00:35

网站title，meta标签中description，如何是网站更好地被搜索引擎搜索

1、 html显示网页标题 < title >title标签在搜索引擎中占有非常重要的地位，最好放在meta标签之前，这样更有利于网站的排名。有些搜索引擎会用title标签内内容的字母优先权进行

2019-04-19 00:00:08

如何让背景图片透明

html 网页里面添加如下代码：(30为透明度)head 里面添加 div 或者 body 里面添加 class=

2018-08-26 20:13:05

php将文字生成透明背景图片代码

本文讲的是用php将生成透明背景图片png的代码，主要目的是为了一些企业网站的电话不想被搜索引擎收录，所以用到图片的形式显示，不能每次更改电话号码很不方便，所以就研究一下

2018-08-26 00:11:31

热点内容

网站制作favicon.ico最完美的方式

2020-04-15

html实现随机点名器的示例代码

2021-04-01

")？">html中如何显示特殊字符(尖括号 “<”,">")？

2020-09-30

自定义美化html5 video视频播放器界面样式

2018-08-26

html怎么设置文字向下

2021-02-25

html/css实现逆序列表（列表编号倒序）

2020-09-30

html空（void）元素有哪些？

2019-11-10

html怎么实现左右滑动导航栏

2020-08-25

html中隐藏a标签的文字并显示背景图片

2019-10-08

html中onclick事件属性定义与用法

2019-10-04

html中隐藏a标签的文字并显示背景图片-kb88凯时官网登录

需求介绍

kb88凯时官网登录的解决方案

完整的代码示例：

热点内容

免费资源网

在线工具

扫一扫随时看

本站下载频道