利用CSS的translate属性或利用CSS实现图片居中的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.parent {
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.children {
float:left;
position:relative;
top:50%;
left:50%;
}
.children-inline {
position: relative;
left: -50%;
-webkit-transform : translate3d(0, -50%, 0);
transform : translate3d(0, -50%, 0);
background-color: black;
color:white;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
<div class="children-inline"><img src="http://nec.netease.com/img/s/2.jpg" alt=""/></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{
padding:0;
margin: 0;
}
.parent {
position:relative;
width:100%;
height:200px;
background:red;
}
.div-in {
position:absolute;
top:50%;
left:50%;
}
.hidden-img {
visibility:hidden;
}
.show-img {
position:absolute;
right:50%;
bottom:50%;
}
</style>
</head>
<body>
<div class="parent">
<div class="div-in">
<img class="hidden-img" src="http://nec.netease.com/img/s/2.jpg" alt="" />
<img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />
</div>
</div>
</body>
</html>
效果图：
利用CSS的translate属性或利用CSS实现图片居中的效果的更多相关文章
- css标签及属性
css标签及属性 HTML引入CSS的方法 1.嵌入式 <style type = “text/css”>要写的样式</style> 2.外联式 <link rel ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- 利用IIS部署WEB网站以及解决CSS/JS不能显示问题
利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...
- 利用wget 抓取 网站网页 包括css背景图片
利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
- jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入
1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> & ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- 重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
随机推荐
- 视图：setContentView()
1.setContentView的作用是将View加载到根view之上,这样当显示view时,先显示根view,然后在显示子view,以此类推,最终将所有view显示出来. 2.setContentV ...
- 关于导入web项目之后项目名上有红叉，但是能够正常运行，代码不会报错的问题
解决方式之一: 1.进入项目包下的.settings目录 2.找到org.eclipse.wst.common.project.facet.core.xml文件,用记事本打开 3.将<runti ...
- JMS学习四（ActiveMQ消息过滤）
一.消息的选择器 不管是在消息发送端设置消息过期时间还是在接收端设置等待时间,都是对不满足的消息有过滤的作用,那消息选择器就是为过滤消息而生的下面来看看消息选择器: ActiveMQ提供了一种机制,使 ...
- ApiException
ApiException 用于在catch中throw 异常,可以添加异常信息, throw new ApiException("线下绑卡异常!"); public class A ...
- [BZOJ1718]:[Usaco2006 Jan] Redundant Paths 分离的路径（塔尖）
题目传送门 题目描述 为了从F个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树．奶牛们已经厌倦了被迫走某一条路,所以她们想建一些新路,使每一对草场之间都会至少有两条相互分 ...
- c++函数相关
1,内连函数 inline 返回值类型 函数名(形参列表) 普通函数成为内连函数:在普通函数声明之前加上inline 成员函数成为内连函数:在类中定义的函数全部默认为内连函数,可以显示加上inline ...
- ES排序值相同顺序随机的问题
ES排序值相同顺序随机的问题 code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: ...
- code first System.Data.Entity.Infrastructure.CommitFailedException: An error was reported while committing a database transaction but it could not be determined whether the transaction succeeded
System.Data.Entity.Infrastructure.CommitFailedException: An error was reported while committing a da ...
- 洛谷P1190 接水问题
题目名称:接水问题 题目来源 [洛谷P1190] (https://www.luogu.org/problemnew/show/P1190) 题目描述 学校里有一个水房,水房里一共有\(m\)个龙头 ...
- python使用内置方法和修饰器方法获取类名、函数名
1. 外部获取 从外部的情况好获取,可以使用指向函数的对象,然后用__name__属性. def a(): pass a.__name__ 或者 getattr(a,'__name__') 2. 内部 ...