很常见的一个需求,就上图每个国家图标都得加上各自指定的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. JAVA_JSON_example

    package cn.kjxy.JSON; import java.util.List; import org.json.JSONArray; import org.json.JSONExceptio ...

  2. cgi表单的处理

    在HTML中,当客户填写了表单,并按下了发送(submit)按钮后,表单的内容被发送 到了服务器端,一般的,这时就需要有一个服务器端脚本来对表单的内容进行一些处理, 或者是把它们保存起来,或者是按内容 ...

  3. monkey检测内存泄漏

    monkey中检查内存泄漏,实际上是对一个操作多次操作后看内存情况,内存泄漏具体的原理可百度,现在我们梳理检测内存泄漏的方法: 测试前你需要安装: 1.MAT分析工具 2.使用工具事实监控内存指标,现 ...

  4. Guzzle Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, malformed JSON

    项目更新到正式平台时,出现Guzzle(5.3) client get请求出现:Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, ...

  5. [MSDN]使用 REST 处理文件夹和文件

    msdn: http://msdn.microsoft.com/zh-cn/library/dn292553.aspx 了解如何使用 SharePoint 2013 REST 界面对文件夹和文件执行基 ...

  6. QQ粘性效果

    演示如下 QQ粘性效果.zip

  7. Python(2.7.6) 标准日志模块 - Logging Handler

    Python 标准日志模块使用 Handler 控制日志消息写到不同的目的地,如文件.流.邮件.socket 等.除了StreamHandler. FileHandler 和 NullHandler ...

  8. 初学android:四大组件之contentprovider

    一.ContentProvider的概念ContentProvider:为存储和获取数据提供统一的接口.可以在不同的应用程序之间共享数据.Android已经为常见的一些数据提供了默认的ContentP ...

  9. iOS NSMutableArray替换某个元素

    A * a1 = [A new]; A * a2 = [A new]; A * a3 = [A new]; A * a4 = [A new]; NSMutableArray *arr = [[NSMu ...

  10. 12天学好C语言——记录我的C语言学习之路(Day 8)

    12天学好C语言--记录我的C语言学习之路 Day 8: 从今天开始,我们获得了C语言中很有力的一个工具,那就是函数.函数的魅力不仅于此,一个程序到最后都是由众多函数组成的,我们一定要用好函数,用熟练 ...