資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 HTML 和 CSS 將影像轉換為模糊效果
一般來說，模糊是人眼的一種視覺效果，當觀看者無法清晰地看到物體的細節時就會發生。
在 HTML 中，我們可以使用 CSS 屬性將模糊效果應用於網頁上的元素（例如影像）。為此，我們使用filter屬性以及blur()函式。此函式對影像元素應用高斯模糊效果，使其更柔和，定義更少。
語法
以下是filter屬性與blur()函式的語法：
filter: blur(radius);
此函式接受一個引數（即半徑），該引數以畫素為單位指定模糊效果的半徑。
示例
在以下示例中，我們獲取一個影像並向其新增 3px 模糊效果：
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 75%;
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
margin-bottom: 70px;
}
</style>
</head>
<body>
<img src="https://tutorialspoint.tw/images/logo.png?v2" alt="Beach image">
</body>
</html>
正如我們在輸出中看到的，影像變得模糊了。
示例
在這裡，我們將影像作為背景影像並向其添加了 3px 模糊效果。此外，我們在背景影像頂部添加了文字。
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
/*CSS of the Background image*/
img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
width: 100%;
}
/*CSS of the text*/
.text {
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-family: Georgia, 'Times New Roman', Times, serif;
border: 3px solid whitesmoke;
border-radius: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="background-image">
<img src="https://tutorialspoint.tw/images/logo.png?v2" alt="Background image">
</div>
<div class="text">
<h3>Visakhapatnam: The city of destiny</h3>
</div>
</body>
</html>
示例
在下面的示例中，我們將原始影像放置在模糊背景影像的中心。
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
/*CSS of the Background image*/
.background-image img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
width: 100%;
}
/*CSS of the front image div*/
.front-image {
width: 600px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*CSS of front image*/
.front-image img {
width: 100%;
height: 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="background-image">
<img src="https://tutorialspoint.tw/images/computer_concepts_icon.svg" alt="Background image">
</div>
<div class="front-image">
<img src="https://tutorialspoint.tw/images/logo.png?v2" alt="beach image">
</div>
</body>
</html>
更新於：2023-09-07
1K+ 次檢視
廣告