这实现思路其实很简单

需求:
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. Power BI 安装注册教程

    把下载好的MSI包PBIDesktop_x64.msi 双击安装 点击下一步 选择文件路径 点击安装 点击完成 初始化中 安装完成界面 账号注册 https://powerbi.microsoft.c ...

  2. OLAP(On-Line Analytical Processing)

    自20世纪80年代开始,许多企业利用关系型数据库来存储和管理业务数据,并建立相应的应用系统来支持日常的业务运作.这种应用以支持业务处理为主要目的,被称为联机事务处理(On line Transacti ...

  3. HDU 4915 多校5 Parenthese sequence

    比赛的时候想了一个自认为对的方法,WA到死,然后还一直敲下去,一直到晚上才想到反例 找是否存在解比较好找,这种左右括号序列,把(当成1,把)当成-1,然后从前往后扫,+1或者-1 遇到?就当初(,然后 ...

  4. Java交换数据为何不起作用原因分析

    一.概述 目前各类语言中向函数传递参数的类型分为三种: 按值传递 按引用传递 按指针传递 其中按值传递表示方法(函数)接收的是调用者提供的变量的拷贝,不改变参数的值:按引用传递表示方法(函数)接收的调 ...

  5. Bean 注解(Annotation)配置(3)- 依赖注入配置

    Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...

  6. hdu 1277 全文检索 (字典树应用)

    全文检索 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  7. slave_net_timeout, MASTER_HEARTBEAT_PERIOD, MASTER_CONNECT_RETRY,以及 MASTER_RETRY_COUNT设置和查看

    在主从复制中,有几个参数是非常重要的,包括slave_net_timeout, MASTER_HEARTBEAT_PERIOD, MASTER_CONNECT_RETRY,以及 MASTER_RETR ...

  8. 使用Kali中的Metasploit生成木马控制Windows系统 (第九天 9.20)

    本文转自:https://www.cnblogs.com/yankaohaitaiwei/p/11556921.html 一.kali及Metasploit kali基于debin的数字取证系统,上面 ...

  9. UVA - 10570 Meeting with Aliens(外星人聚会)(暴力枚举)

    题意:输入1~n的一个排列(3<=n<=500),每次可以交换两个整数.用最少的交换次数把排列变成1~n的一个环状序列. 分析:正序反序皆可.枚举每一个起点,求最少交换次数,取最小值. 求 ...

  10. Windows环境安装与搭建node.js环境

    参考文章:https://www.cnblogs.com/zhouyu2017/p/6485265.html 一.下载node.js,直接下一步至安装完成.https://nodejs.org/en/ ...