很常见的一个需求,就上图每个国家图标都得加上各自指定的a标签

这时,我们就可以去加上隐藏且定位准确的几个a标签

这个时候,主要用到的就是text-indent和overflow 这两个属性的配合。text-indent 属性规定文本块中首行文本的缩进;overflow 属性规定当内容溢出元素框时发生的事情。

案例

<div style="position:relative;margin:0 10px;">

<img src="https://i.alipayobjects.com/i/localhost/png/201501/4DiyU5rSSb.png" style="width:100%">

<a id="tuishui1" href="http://ds.alipay.com/fd-peece7p90o1/index.html" class="country" style="width:16%;height:17%;left:14%;top:21%;">荷兰</a>

<a id="tuishui2" href="http://ds.alipay.com/fd-nn1d11oso5k/index.html" class="country" style="width:23%;height:25%;left:18%;top:53%;">意大利</a>

<a id="tuishui3" href="http://ds.alipay.com/fd-556xg2aa4tq/index.html" class="country" style="width:16%;height:18%;left:35%;top:34%;">德国</a>

<a id="tuishui4" href="http://ds.alipay.com/fd-vsnvd6on474/index.html" class="country" style="width:15%;height:16%;left:43%;top:12%;">瑞士</a>

<a id="tuishui5" href="http://ds.alipay.com/fd-leogk4hpv6s/index.html" class="country" style="width:21%;height:22%;left:64%;top:4%;">英国</a>

<a id="tuishui6" href="http://ds.alipay.com/fd-ytp228dt7wn/index.html" class="country" style="width:22%;height:24%;left:55%;top:30%;">韩国</a>

<a id="tuishui7" href="http://ds.alipay.com/fd-vtev8ix3xsw/index.html" class="country" style="width:19%;height:21%;left:65%;top:57%;">法国</a>

<a id="tuishui8" href="http://ds.alipay.com/fd-j1338t72e2q/index.html" class="country" style="width:16%;height:18%;left:48%;top:78%;">西班牙</a>

</div>

<style>

.country {
  position: absolute;
  display: block;
  text-indent: 30em;
  overflow: hidden;
  border-radius: 100px;
}

</style>

如何在一整张背景图中,加隐形的a标签的更多相关文章

  1. css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

    css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...

  2. cocos2dx 3.x(一张背景图利用定时器实现循环轮播)

    // // MainScene.hpp // helloworld // // Created by apple on 16/9/19. // // #ifndef MainScene_hpp #de ...

  3. css中用一张背景图做页面的技术有什么优势?

    css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...

  4. IOS从背景图中取色

    ​1. [代码][其他]代码     void *bitmapData; //内存空间的指针,该内存空间的大小等于图像使用RGB通道所占用的字节数. static CGContextRef Creat ...

  5. css 在背景图上加渐变

    <html> <head> <title>我的第一个 HTML 页面</title> <style> .banner { width: %; ...

  6. js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  7. gtk中构件添加背景图

    在gtk中我们总想要去给构件添加背景图,具体函数代码如下 void chang_background(GtkWidget *widget, int w, int h, const gcha r *pa ...

  8. [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动

    经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...

  9. background-size做自适应的背景图

    background-size做自适应的背景图 在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸,在像元素加入背景的时候发现背景图片的原始尺寸很大,当我把背景图写入时往往超过元素很大一 ...

随机推荐

  1. C语言中 指针与结构体

    就像数组一样,指向结构体的指针存储了结构体第一个元素的内存地址.与数组指针一样,结构体的指针必须声明和结构体类型保持一致,或者声明为void类型. 1 2 3 4 5 6 7 8 9 10 11 12 ...

  2. Android开发了解——AAPT

    aapt即Android Asset Packaging Tool , 在SDK的build-tools目录下. 该工具可以查看, 创建, 更新ZIP格式的文档附件(zip, jar, apk). 也 ...

  3. svn has stoped working

    各种问各种搜  ,看来还得靠自己,,,,下面是解决方案; 如果你出现这种情况,  右键点击svn的选项,就弹出这个框框,,,,点击svn里的哪个选项都是弹出这个框框,,,,重新安装,重启,换各种版本安 ...

  4. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  5. 要源码的快来啊,价值500的OA商业源码免费送给大家,望大家年底奖金多多......

    功能介绍: 兼容IE6,7,8以上.GooleChrome.360及遨游等浏览器. 系统特色: 1.系统经过抗压测试. 2.语音提示功能. 3.支持office2007在线编辑. 4.强大的图形化工作 ...

  6. Decorator设计模式浅谈

    装饰类跟基础组件都实现了目标接口,是为了匹配正确的类型.Java中的IO设计就是典型的Decorator设计模式. 装饰模式产生的初衷是, 对默认实现类的行为进行扩展. 由于装饰类的构造器接受的参数是 ...

  7. pdf压缩之GSview

    今天实验室一个同学在网上投简历,网站要求投稿的简历pdf文件必须在100K以内.简历用的是ModernCV的模板,无论如何设置都在160k左右. 尝试用acrobat的压缩功能,也不能保证在100K以 ...

  8. mysql空间数据相关操作

    建表语句: CREATE TABLE ts.points ( name ) NOT NULL, location POINT NOT NULL, description ) ); 添加记录如下: IN ...

  9. android API文档查询---context、toast、SharedPreferences

    /*查阅api ---context1.abstract AssetManager     getAssets() Returns an AssetManager instance for the a ...

  10. Makefile当中宏定义传递字符串

    前几天遇到类似的问题[http://bbs.chinaunix.net/thread-1589386-1-1.html]: 在Makefile里面定义一个字符串在程序里面使用, CFLAGS += - ...