这实现思路其实很简单

需求:
1. 图片比原来的<div>大,需要切割图片。
2. 图片左上角显示标签

解决思路:

1. 把照片设置成div的backgroundImage,然后用CSS3切割图片。

.gobalPostImgHeaderCentered {
display: inline-block;
width: 170px;
height: 130px;
background-position: center center;
background-size: cover;
}

2. 把小标签的Position设置在母DIV的左上角

.gobalPostImgTag {
background-color: #262626;
color: #ffffff;
width: 45px;
height: 22px;
position: absolute;
top:;
left:;
text-align: center;
}

ImageTag,图片左上侧有一个小标签的更多相关文章

  1. 3月题外:关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  2. wxPython缩放图片控件的一个小例子

    前几天写程序的时候,想有个自适应的图片控件,但是一直没有找到合适的解决方案.今天终于解决了这个问题,发在这里,以供参考. 程序截图: 文件下载地址: http://files.cnblogs.com/ ...

  3. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  4. Pygame:编写一个小游戏 标签: pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)

    大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...

  5. 前端开发HTML&css入门——常用的标签以及一个小练习

    meta标签 <!doctype html> <html> <head> <meta charset="utf-8" /> < ...

  6. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

  7. Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)

    ArthurSlog SLog-71 Year·1 Guangzhou·China Sep 12th 2018 ArthurSlog Page GitHub NPM Package Page 掘金主页 ...

  8. Redola.Rpc 的一个小目标

    Redola.Rpc 的一个小目标 Redola.Rpc 的一个小目标:20000 tps. Concurrency level: 8 threads Complete requests: 20000 ...

  9. UniversalImageLoader的一个小问题

    最近在使用UniversalImageLoader时遇到了一个小问题,多个地方同时通过ImageLoader.getInstance().loadImage(url, new ImageSize(dp ...

随机推荐

  1. Java8系列 (四) 静态方法和默认方法(转载)

    静态方法和默认方法 我们可以在 Comparator 接口的源码中, 看到大量类似下面这样的方法声明 //default关键字修饰的默认方法 default Comparator<T> t ...

  2. Vulkan Device Memory

    1.通过下面的接口,可以获得显卡支持的所有内存类型: MemoryType的类型如下: 2.引用索引3对内存的描述 我们可以通过调用vkGetPhysicalDeviceMemoryPropertie ...

  3. 028-PHP常用数学函数abs和acos和asin

    <?php print(abs(-));//打印绝对值 // 从 -1 到1打印acos函数的值 print("<TABLE BORDER=\"1\"> ...

  4. 【转】在C#中?,?:和??

    符号:?名称:可空类型修饰符.引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null; 编译器就会报错.为了使值类型 ...

  5. UVA - 11149 Power of Matrix(矩阵倍增)

    题意:已知N*N的矩阵A,输出矩阵A + A2 + A3 + . . . + Ak,每个元素只输出最后一个数字. 分析: A + A2 + A3 + . . . + An可整理为下式, 从而可以用lo ...

  6. [Python3] RSA的加解密和签名/验签实现 -- 使用pycrytodome

    Crypto 包介绍: pycrypto,pycrytodome 和 crypto 是一个东西,crypto 在 python 上面的名字是 pycrypto 它是一个第三方库,但是已经停止更新,所以 ...

  7. Mac 终端命令使用自动补全时忽略大小写设置

    Mac 终端在使用 tab 补全命令时默认大小写敏感,通过以下设置方法可以忽略大小写,方法同样适用于 iTerm2. 打开终端输入以下命令: nano .inputrc 将以下命令复制进去: set ...

  8. C#应用程序结构

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:Spring AOP(面向切面编程)

    面向切面编程(AOP)和面向对象编程(OOP)类似,也是一种编程模式.Spring AOP 是基于 AOP 编程模式的一个框架,它的使用有效减少了系统间的重复代码,达到了模块间的松耦合目的. AOP ...

  10. css 网格线

    白色网格线 background: #58a; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 0), ...