html背景图实现虚线,去掉a标签和按钮加背景图片虚线/阴影完美解决方案
当用户注册都会点击一个a标签更换验证码。当点击后a标签上有个阴影部分。对于喜欢美观的同学却不可容忍!
这是什么原因呢?原来是a标签的href属性惹的祸。
1、仅仅是a标签
我了解的有两种解决办法
其一:对症下药。既然是href引起的。那就去掉href属性
当我们用href=javascript:RefreshCode();只是更新验证码。并没有跳转页面。
复制代码代码如下:
看不清楚?换个图片
所以可以去掉href后,给a标签加上onclick事件,调用更新验证码函数即可
复制代码代码如下:
看不清楚?换个图片
其二:退一步。求同存异。既然你想用href属性。好吧。那我再给你加个事件:onfocus
只要修改一下也可以完美去掉 给a标签加个οnfοcus="this.blur()"
当然。如果你想让a标签没有下划线。则:style="text-decoration: none"
复制代码代码如下:
看不清楚?换个图片
修改完成后的效果
而在FF等浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none;就可以了,即:
复制代码代码如下:
a{ outline:none; }
当然这仅仅是去掉单个。如果页面有多个a标签那岂不要挨个挨个添加onfocus事件吗?
当然不是。我们可以在页面加载的时候。通过:window.document.links.length(此处window可以省略)来获取页面所有的a标签。然后遍历注册事件。
复制代码代码如下:
window.οnlοad=function(){
for(var i=0; i
document.links[i].οnfοcus=function(){this.blur()}
}
2、给button加背景图片:
另为如果你给按钮加了背景图片。会有阴影。
也可以用相同的办法实现
复制代码代码如下:
修改后效果:
3、如果给img加a标签,那么给a标签加onfocus的同时还要设置img的border属性:border=0
复制代码代码如下:
如果你页面既有a标签。又有button。那你可以将其封装成一个函数
复制代码代码如下:
function fHideFocus(tName){
aTag=document.getElementsByTagName_r(tName);
for(i=0;i
//for(i=0;i
}
当前是添加一个hidefocus的属性,它的值是一个布尔值,如hideFocus=true。也可省略赋值直接hideFocus。
代码如果没有hideFocus,那么鼠标点击该超链接,则外面出现一个虚线框,即为聚焦。而使用了hideFocus则不会有虚线框。
注释掉的句子是添加onfucus=this.blur();效果相同。
然后调用fHideFocus("A");即可把a的虚线框去掉
通过传递不同的参数 可以去掉不同的虚线框比如"BUTTON"可以去掉button的虚线框,但要记住参数要用大写字母
扩展:
A. map area内链接如何消除链接虚线?
这是一个观念上的错误,其实应该在所在map的图片上加以控制,而不是在area内,参考传统办法
B. 关于onFocus
复制代码代码如下:
其中,onfocus是设置鼠标焦点事件的东西,这个可以用,也可以不用,不过为了让更多的浏览器识别的话,建议采用;border=0这个才是去除虚线框的关键所在(在网上看到大部分人都是用οnfοcus="this.blur()"来消除虚线框,但有的时候,仅仅用这一句是不能消除的)
对于牛人来说知识点已是很陈旧。但对于刚接触的朋友却是及时雨,今天正好遇到。故记录于此。知识要靠一点一点积累。
html背景图实现虚线,去掉a标签和按钮加背景图片虚线/阴影完美解决方案相关推荐
- html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...
- QT上设置背景图不影响子控件以及按钮控件的透明化
QT中设置背景图不影响子控件 QT中设置背景图的方法不少,我这里是直接使用stylesheet来设置背景图.如果直接在UI界面进行如下所示设置 border-image: url(:/resource ...
- php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层?
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
- 背景图以拉伸方式(不重复)填充背景
今天要解决一个用背景图以拉伸方式(不重复)填充背景的问题. 看了<用CSS把背景图片拉伸>和<css 如何让背景图片拉伸填充避免重复显示>后用background-repeat ...
- HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
- html img和背景图处理图片不拉伸_img固定宽度和高度,不规则图片变形问题的解决方法...
日常项目中,后端传图不规则,比例大小不一.前端又要去做适应,是一个让人非常头大的问题. 总结了一个不规则图片不变形的解决方案: 注:先写一个长 300px 宽 200px 带边框的 div ,图片接近 ...
- css禁止背景图拉伸_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽) 重复展示(用无数张同样的图片来铺满容器的背景面积) x轴 /y轴 重复展示(纵 ...
- html在背景图里加白框,毕生所用最好的四个图片类APP
废话删掉,直接上图,带你装逼带你飞 我最喜欢四个照片类APP 当然,他们也都是各有优点,优势互补,通常情况下,我是根据照片类型来选择使用的APP.(去去去,去下载) 爱相机 PICSArt ...
- css背景图不失真_html css 中非常经典的背景图片充满屏幕且不变形问题
要求: 图片尺寸任意,图片宽高比任意(意思就是随便拿张图片都得ok),渲染后不可变形 图片中心与可视区中心重合 图片充满整个屏幕 自适应屏幕宽高变化 给图片上一层蒙版,便于在其上渲染文字 思路分析: ...
最新文章
- ubuntu mysql 5.7.19_在Ubuntu19下安装Mysql-5.7.24
- 灯塔的出现给那些有想法,有能力而又缺乏资金的社区人士提供了一条途径,也给那些有资金的BCH爱好者提供了一条投资渠道,良性的共赢机制在保证平台健康发展的前提下,一定会催生出更多基于BCH的应用。
- redis学习-02
- input 属性和用法
- 使用VisualSVN Server自动发布站点
- 如果在高速免费前上高速怎么计算机,上高速之前是收费的,下高速的时候免费了,这种情况如何处理?...
- 了解这些坑,再也不会出现诡异的BUG了~
- Android udp json+数组 ---gt;bytes发送数据
- 帆软填报JS不刷新页面排序表格
- 《CLR via C#》读书笔记 之 计算限制的异步操作
- mac sublime text 3 列操作,替换相同内容, 用动态输入的方式
- 4399游戏Web前端工程师2021秋招面经
- 一元多次方程近似解法
- 用foobar,ape转mp3
- 亲测有效 debian出现does not have a Release file. N: Updating from such a repository can‘t be done securely
- uploader上传
- [转]个人网站对接支付宝,微信支付接口史上最详细教程
- 黑马12月开班时间出炉!戳文章免费试学!
- mysql varchar能不能超过255个字节及产生的问题。
- 亚马逊关键词在哪里找准确一点?
热门文章
- android cast延迟,Miracast延时严重 米投更方便_高清评测-中关村在线
- 两台电脑连接交换机通信
- 讯雷半月给我网站带来8000G流量
- gnome 3 mate_GNOME 2粉丝喜欢Mate Linux桌面
- springcloud学习笔记---环境搭建--Linux下jdk安装
- 修复迅雷网络右键的选项
- Nacos--概述、安装;注册、配置中心;集群、持久化以及开机自启
- Vue mixins 和 extends 使用详解
- .net 自动化测试神器AutoFixture +AutoMoq
- Office Online Server 文档在线预览编辑【速成篇】