資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究應用 CSS 變換和縮放時保持影像質量
CSS `image-rendering` 屬性幫助我們設定影像縮放演算法。應用變換和縮放時，影像有時看起來模糊。為了改善影像質量，請使用 CSS `image-rendering` 屬性。讓我們看看如何保持影像質量。
語法
CSS `image-rendering` 屬性的語法如下：
Selector {
image-rendering: /*value*/
}
以上，值可以是：
auto − 這是預設值，網頁瀏覽器會自動選擇縮放演算法
smooth − 使影像顏色平滑。
high-quality − 提供更高質量的縮放
crisp-edges − 保持影像的對比度和邊緣
pixelated − 如果影像放大，則考慮使用最近鄰演算法。
以下示例說明了 CSS `image-rendering` 屬性。
示例
在這個示例中，我們嘗試使用 `image-rendering` 屬性的 `smooth`、`pixelated` 和 `crisp-edges` 值來增強影像質量。
#one {
image-rendering: smooth;
}
#two {
image-rendering: pixelated;
}
#three {
image-rendering: crisp-edges;
}
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
img {
height: 200px;
width: 200px;
}
#one {
image-rendering: smooth;
}
#two {
image-rendering: pixelated;
}
#three {
image-rendering: crisp-edges;
}
</style>
</head>
<body>
<img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
</body>
</html>
示例
在這個示例中，我們嘗試使用 `image-rendering` 屬性的 `smooth`、`pixelated`、`crisp-edges` 和 `high-quality` 值來增強影像質量。
#one {
image-rendering: pixelated;
}
#two {
image-rendering: smooth;
}
#three {
image-rendering: crisp-edges;
}
#three {
image-rendering: high-quality;
}
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
img {
padding: 5%;
border-radius: 40%;
height: 20%;
width: 20%;
}
#one {
image-rendering: pixelated;
}
#two {
image-rendering: smooth;
}
#three {
image-rendering: crisp-edges;
}
#three {
image-rendering: high-quality;
}
</style>
</head>
<body>
<img id="one" src="https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg" />
<img id="two" src="https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg" />
<img id="three" src="https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg" />
<br/>
pixelated, smooth, crisp, high quality
</body>
</html>
更新於：2023-12-26
1K+ 次瀏覽
廣告