Gradient tuyến tính được sử dụng để sắp xếp hai hoặc nhiều màu theo các định dạng tuyến tính như từ trên xuống dưới. Để thêm độ trong suốt, hãy sử dụng hàm RGBA () và xác định các điểm dừng màu.
Sau đây là mã để đặt gradient tuyến tính trong suốt bằng cách sử dụng CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to left,
rgb(111, 0, 255),
rgba(111, 0, 255, 0.616),
rgba(111, 0, 255, 0.384),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<h2>The above linear gradient goes from white to dark blue purple</h2>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
