数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会研究
时装研究
法律研究如何使用 CSS 创建头像图片？
网站上的头像图片是作者的个人资料中可见的个人资料图片。在团队页面中也能看到，公司网站上可以看到所有团队成员的详细信息。让我们看看如何使用 HTML 和 CSS 创建头像图片。
设置头像图片
可以使用 <img> 元素将图片像任何其他图片一样放置 −
<img src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt ="Amit Diwan" class="avatarImage"> <img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt ="John Smith" class="avatarImage">
为两个图片设置样式，以便我们可以对它进行造型，并形成头像。
用头像图片样式造型
使用 border-radius 属性并将其设置为 50%。同时，使用 vertical-align 属性并将值设置为 middle。这将设置图片的垂直对齐方式。
头像图片的宽度和高度设置为 250px −
.avatarImage {
vertical-align: middle;
width: 250px;
height: 250px;
border-radius: 50%;
border:3px solid black;
margin: 10px;
}
创建头像图片
以下是使用 CSS 创建头像图片的代码 −
<!DOCTYPE html>
<html>
<head>
<style>
.avatarImage {
vertical-align: middle;
width: 250px;
height: 250px;
border-radius: 50%;
border:3px solid black;
margin: 10px;
}
</style>
</head>
<body>
<h1>Avatar Images Example</h1>
<img src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt ="Amit Diwan" class="avatarImage">
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt ="John Smith" class="avatarImage">
</body>
</html>
创建卡片式头像图片
可以将头像图片设为联系人卡片。让我们看一个示例 −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin:25px;
}
img {
margin: 5px 10px 1px 5px;
height: 50px;
width: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Avatar Images</h1>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png">
James Anderson
</div>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
Britney Smith
</div>
</body>
</html>
更新日期： 2023 年 12 月 14 日
1K+ 浏览
广告