css 圆形头像
方法一:背景图片(推荐) 好处是,图片长宽不等的情况下图片不会变形
.ui-photo {
width: 100px;
height: 100px;
background: url("img/test.jpg") no-repeat;
background-position: center;
background-size: 100px;
border-radius: 50%;
}
<div class="ui-photo"></div>
效果:
方法二:img标签
.ui-photo1 img{
width: 100px;
height: 100px;
border-radius: 50%;
}
<div class="ui-photo1">
<img src="img/test.jpg"/>
</div>
效果:
css 圆形头像的更多相关文章
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- css3圆形头像(当图片宽高不相等时)
1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...
- WordPress制作圆形头像友情链接页面的方法
网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...
- html圆形头像的制作
<html> <head><title>圆形头像的制作</title> <style type="text/css">. ...
- 通过CSS3实现圆形头像显示
很久没更新博客了,因为比较菜,也没什么能在上面分享的.作为新手,马上要毕业找工作了,最近又在重新学习web的一些知识,刚刚学到CSS3,跟大家分享一些比较有趣的知识.今天分享的是利用CSS实现圆形头像 ...
- Android 圆形头像 自己动手
圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...
- Android之圆形头像裁切
PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...
- Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像
此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
- NGUI 圆形头像遮罩
NGUI 圆形头像遮罩 列表,求助 http://tieba.baidu.com/p/3961444508
随机推荐
- Mybatis 配置resultMap一对多关联映射
resultMap配置: 引用: PO类: 接口: 测试: public class UserMapperTest { private SqlSessionFactory sqlSessionFact ...
- 【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作
什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的 ...
- 解决ssh ltt3.bg.cn 'jps' bash: jps: command not found 问题
>>提君博客原创 http://www.cnblogs.com/tijun/ << linux 上我用hadoop用户配置好SSH后,运行 ssh ltt3.bg.cn ' ...
- 使用 idea 产生错误The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized
解决方法 spring.datasource.url=jdbc:mysql://localhost:3306/spring_cache?serverTimezone=GMT%2B8
- llegalStateException: getWriter() has already been called for this response
我使用Springmvc的处理器进行向AJAX传值时出现的问题 当我使用 PrintWriter out = response.getWriter();out.print("用户不存在,请先 ...
- Zookeeper的作用,在Hadoop及hbase中具体作用
什么是Zookeeper,Zookeeper的作用是什么,在Hadoop及hbase中具体作用是什么 一.什么是Zookeeper ZooKeeper 顾名思义 动物园管理员,他是拿来管大象(Hado ...
- Sqoop 使用详解(内含对官方文档的解析)
Sqoop 是 Cloudera 公司创造的一个数据同步工具,现在已经完全开源了. 目前已经是 hadoop 生态环境中数据迁移的首选,另外还有 ali 开发的 DataX 属于同类型工具,由于社区的 ...
- JavaScript控制阻止表单提交
1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...
- SQL Server与SQL Server Express的区别
SQL Server Express 2005(以下简称 SQLExpress) 是由微软公司开发的 SQL Server 2005(以下简称 SQL2005)的缩减版,这个版本是免费的,它继承了 S ...
- Lodop获取全部JS代码,传统JS模版的生成
Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍传统JS模版的生成方法.两种模版都可以存入一下地方进行调用, ...