html之圆形用户头像

实现圆形的用户头像代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>头像圆形化处理</title><link rel="stylesheet" href=""><style type="text/css" media="screen">#d1{width: 100px;height: 100px;border: 1px solid blue;border-radius: 100%;overflow: hidden;}img {max-height: 100%;}</style>
</head>
<body><div id="d1"><img src="http://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/48540923dd54564e2d86086eb8de9c82d0584f82.jpg" alt=""></div>
</body>
</html>

在<div>标签中套一个<img>标签，并且利用CSS设置外层<div>标签的边框大小和边框样式，在这里通过border-radius:100%将边框设置为圆形，改变设定的数值大小就可以得到不一样的边框。

将边框设置为圆形后，还要对与overflow属性进行设置，将overflow属性设置为hidden，这样当图片超出<div>标签的width和height时就可以将超出的部分隐藏，形成圆形图片的效果，效果图如下：

html之圆形用户头像相关推荐

php设置用户头像,php制作圆形用户头像的实例_自定义封装类源代码
思路使用图层的方法设计,共需要创建3个图像层 1.底层:最后生成的图像 2.真实用户头像:作为中间层,用户上传的真实头像图片 3.圆形蒙版:作为最上层,在蒙版中绘制圆形,并设置为透明如图: 代码如 ...
php制作圆形用户头像——自定义封装类源代码
思路使用图层的方法设计,共需要创建3个图像层 1.底层:最后生成的图像 2.真实用户头像:作为中间层,用户上传的真实头像图片 3.圆形蒙版:作为最上层,在蒙版中绘制圆形,并设置为透明如图: 代码如 ...
方形图片转换成圆形图片（涉及微信用户头像方形转换成圆形）
在一个性格测试题中最后生成一个带有用户头像的海报,中有用户的头像,在用户授权的时候拿到用户头像的url BufferedImage resultImg = null;String url=richSe ...
iOS之设置用户头像的圆角
1. 显示用户头像用UIImageView实现,添加默认图片后效果如下图所示,头像显示为矩形图片. 代码实现: // ViewController.m // SetUserImage // // Cr ...
iOS 图片裁剪(用户头像裁剪)
图片裁剪把一张图片裁剪为指定的样式,比如常见的用户头像思路: 在图片的基础上绘制时,需要创建一个位图上下文确定裁剪区域(超出裁剪区域的都将被清除) 绘制图片从位图上下文中获取图片关闭上下文 ...
Android开发之用户头像上传
一,概述本篇博客总结一下自己在开发过程中应用到的一些知识,在本篇博客中带领大家完成用户头像选择或者拍照上传,并对图片进行大小的压缩,和形状的控制,可以将用户选择到的图片裁剪成圆形上传. ok,我们开 ...
Android 更换用户头像（拍照、相册选取）
Android 更换头像前言正文一.新建项目二.配置项目三.布局.样式改动四.权限请求五.底部弹窗显示六.工具类七.打开相机.相册八.页面返回显示图片九.本地缓存十.后台获取 ...
android开发——用户头像
最近,小灵狐得知了一种能够加快修炼速度的绝世秘法,那便是修炼android神功.小灵狐打算用android神功做一个app,今天他的修炼内容就是头像功能.可是小灵狐是个android小白啊,所以修炼过 ...
wordpress头像被墙_如何在WordPress中更改用户头像的形状
wordpress头像被墙 Ever come across a site that has custom shapes for their user avatars or gravatars? Wa ...
php 微信头像圆形,微信头像生成圆形邀请卡
微信接口获取用户信息,返回的用户头像是132x132的jpeg图片. 用cURL下载微信头像,然后var_dump(getimagesize($avatar)); 结果 array(7) { [0]= ...

html之圆形用户头像

html之圆形用户头像相关推荐

最新文章

热门文章