CSS背景图片加超链接

最新推荐文章于 2022-07-14 21:13:11 发布
最新推荐文章于 2022-07-14 21:13:11 发布
阅读量7.2k 收藏 6
点赞数
分类专栏： 编程收集

在做页面时候，有时难免会把图片图片做成背景，但是又想加个链接，可以采用正面的办法解决。

#logo { width:249px; height:62px;  background-image:url(images/logo.gif);}

#logo a{ display:block;  width:249px;  height:62px;  cursor:hand; }

 然后在<html>里加入以下代码

 <div id="logo"><a href="http://www.cctv.com"></a>

用IE浏览图片就能有超链接，鼠标并以一个小手出现，在dreamweaver效果是一样的。

 特别说明：为背景加超链接时必须加display:block，并且按Logo图片的大小定义好它的宽和高。这样才能达到想要的效果。


a 元素是是一个行内元素，display：block；就是将他强行转化为块级元素。行内元素没有没有上下填充。display：block；是让连接表现得像块极元素，增大起点击区域。以为你后面的a:hove背景图片的实现打下基础。

tianyaweizhiren
关注
专栏目录
HTML 背景颜色 背景图片 图片 超链接
qq_45858803的博客
03-13 1699
文章目录图示概念背景颜色图示结果背景图片图示结果图示概念标签 图片 属性 图片路径 src 标题 title 默认值 alt图示结果图示概念超链接/热引用 属性 target图是结果 图示概念 背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
CSS 3之超链接特效
程序员小白的博客
07-04 1417
通过使用伪类能对超链接进行修饰； 伪类是一种特殊的选择符，能被浏览器自动识别； 最大的用处是在不同状态下能对超链接定义不同的样式效果，是 CSS 3本身定义的一种类； 例子 1： 例子 2：给超链接加入提示内容 将图片作为背景图添加到超链接中，这样超链接能有更加精美的效果； 使用 属性来实现； 例子 2： 例子 3：...
html超链接新页面的背景图,在CSS中如何给背景图片加上超链接
weixin_33535402的博客
06-03 3851
在CSS中给背景图片加上超链接的方法：首先新建模块，并设置其class属性为testid；然后将页面的css样式写入标签内，并通过class设置css的样式；最后使用a标签创建一个链接，实现给背景图片加上超链接。本教程操作环境：windows7系统、css3版，DELL G3电脑。在CSS中给背景图片加上超链接的方法：1、新建一个html文件，命名为test.html，用于讲解在CSS中如何给背景...
CSS中用背景图片做为超链接的方法
hyshucom
05-14 1543
Web2.0时代，在网页设计中用背景图片做为超链接已成为主流，通过CSS的控制，使鼠标移到图片上能有很好的变换效果，虽然用普通的插入图片的方法也能实现效果，但用CSS更为方便，再配合css sprite，还能加快图片的加载。所以今天就向大家介绍CSS中用背景图片做为超链接的方法。 实现这样的效果只需要直接在div中加上一个空的超链接，然后通过CSS来控制，CSS设置的关键是要加上display...
图片作为背景并且是链接的写法(背景图片加链接)
12-13
图片作为背景，并且是链接的写法。例如网站的logo图片。例如：土豆的logo图片 <a>土豆网</a> a {display: block;width: 170px;height: 42px;text-indent: -9999px;background: url(/skin/__g/img/ui/nav/v2_v6.png) 0 0 no-repeat;}由于z-indent的原因土豆网三个字是不会显示的。title属性是鼠标指向会显示的文本。<a><span>链接背景图
给背景图片添加超链接
css使多个相互之间有间隔的元素两端对齐显示
04-12 2240
.zhuanjia{background-image:url(../images/zhuanjia.jpg);background-position:center top;background-color:black;} <li class="zhuanjia"> <a href="/doctor/" style="display: block; width: 100...
CSS样式——背景和超链接
One of thre_tigers的博客
01-10 694
CSS样式是对HTML基本类型的样式设定，其中一大重点就是背景和超链接的设置 1.背景样式 背景样式用background来设置，有几个子属性：背景颜色background-color，背景图片background，以及背景填充background-reapeat 属性 描述 用法 background-color 背景颜色 backgro...
CSS-背景 超链接
weixin_47295886的博客
07-14 1023
background-color:使用颜色值设置 background-image:url（“ 图片--相对路径文件名”） background-repeat：背景图片的填充方式 a:link------没有访问的---- a:visit-------已经访问过-- a:hover-鼠标停在上方 a:active--鼠标刚点击...
html5背景图片能加链接,CSS中用背景图片做为超链接的方法
weixin_33473110的博客
06-08 3034
Web2.0时代，在网页设计中用背景图片做为超链接已成为主流，通过CSS的控制，使鼠标移到图片上能有很好的变换效果，虽然用普通的插入图片的方法也能实现效果，但用CSS更为方便，再配合css sprite，还能加快图片的加载。所以今天就向大家介绍CSS中用背景图片做为超链接的方法。实现这样的效果只需要直接在div中加上一个空的超链接，然后通过CSS来控制，CSS设置的关键是要加上display:bl...
css控制超链接(css超链接样式)
09-25
以下代码展示了如何在链接的左边添加一个固定位置的背景图片。 ```css a:link { color: #f00; padding-left: 13px; background: url(fasfas.gif) no-repeat left center; text-decoration: none; } a:...
jQuery和CSS3鼠标悬停超链接文字动画特效
12-10
- `assets`目录：可能存放图片、背景或其他视觉元素。 - `fonts`目录：可能包含用于动画特效的特殊字体文件。 - `css`目录：存放所有CSS样式表，包括主要的样式文件和可能的分页样式。 总的来说，这款"jQuery和CSS3...
超链接背景图片
xiaoxingxingzai的博客
10-23 1426
<style> a{ display: inline-block; width: 250px; height: 150px; background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1728444903,291...
css背景图片添加url_CSS背景图片–如何向您的Div添加图片URL
cumi7754的博客
08-18 4694
css背景图片添加urlSay you want to put an image or two on a webpage. One way is to use the background-image CSS property. 假设您要在网页上放置一两个图片。 一种方法是使用background-image CSS属性。 This property applies one or more b...
Web前端开发——CSS样式（Ⅱ）背景、超链接样式
wq_ocean_的博客
02-03 2200
目录 1. CSS背景 1.1 基本属性 1.2 文件组织形式 1.3 测试代码 1.4 效果图 2. CSS超链接 2.1 链接的四种状态 2.2 测试代码 2.3 效果图 1. CSS背景 1.1 基本属性 background-color 背景颜色可以那些颜色值，包括RGB函数来设置它 background-image 背景图片我们需要添加一个ur...
给超链接加背景图片
JarryLiu 的专栏
04-08 1589
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> Css代码 .aa{ background-image:url(t1.png); display:block; background-repeat:no-repeat; text-align:center; paddi
HTML之----背景颜色、背景图片、图片、超链接
qq_44807271的博客
01-15 1245
这里写目录标题bgcolor：背景颜色background：背景图片图片imgsrctitlealt超链接ahref bgcolor：背景颜色 background：背景图片 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景颜色和图片</title> </head> <!--bgcolor设置背景颜色，不是浮动于浏览器窗口上方，是
CSS中超链接、文本样式以及背景修饰
Jsy_997的博客
03-26 3432
1.CSS链接 <a href="https://www.baidu.com/" target="_blank">This is a link</a> href表示链接跳转的地址 _blank表示在新页面内打开网页 如果不设置target的值将默认在当前页面打开新的链接 伪元素设置属性样式。 a:link- 一个正常的、未访问的链接 a:visited- 用户访问过的链接 a:hover- 用户将鼠标悬停在链接上时的链接 a:active- 点击时的链接 以a:lin
css003：链接伪类和背景设计
weixin_44699728的博客
05-29 271
a:link{属性:值;} a{属性:值}效果是一样的。 a:link{属性:值;} 链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态,按上去不松手 实例： head> <meta charset="UT...
html css：背景图片链接css写法
weixin_30539625的博客
10-31 725
图片作为背景，并且是链接的写法。例如网站的logo图片。例如：土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href="http://www.tudou.com">土豆网</a> a{display:block;width:170px;height:42px;text-indent:-9999px;back...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值