資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時裝研究
法律研究如何使用 CSS 建立頭像圖片？
網站上的頭像圖片是作者的個人資料中可見的個人資料圖片。在團隊頁面中也能看到，公司網站上可以看到所有團隊成員的詳細資訊。讓我們看看如何使用 HTML 和 CSS 建立頭像圖片。
設定頭像圖片
可以使用 <img> 元素將圖片像任何其他圖片一樣放置 −
<img src="https://tutorialspoint.tw/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.tw/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+ 瀏覽
廣告