Opacity trong CSS: opacity là một thuộc tính được sử dụng để điều chỉnh độ mờ của một phần tử, từ giá trị 0 (hoàn toàn trong suốt) đến 1 (không trong suốt). Khi opacity của một phần tử được đặt không phải là 1, thì nội dung của phần tử đó cũng sẽ được hiển thị với độ mờ tương ứng.
Dưới đây là một ví dụ về cách sử dụng thuộc tính opacity trong CSS:
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Opacity Example</title>
</head>
<body>
<div class="container">
<p>This is a paragraph with full opacity.</p>
<p class="transparent-paragraph">This is a paragraph with reduced opacity.</p>
</div>
</body>
</html>
CSS (styles.css):
css
.container {
background-color: lightgray;
padding: 20px;
}
.transparent-paragraph {
opacity: 0.5; /* Đặt độ mờ là 0.5 (50%) */
}
Trong ví dụ này, chúng ta có một phần tử .container với một nền xám nhạt và nội dung văn bản. Phần tử .transparent-paragraph có thuộc tính opacity được đặt thành 0.5, điều này làm cho đoạn văn bản trong phần tử này mất đi 50% độ trong suốt. Điều này dẫn đến việc nội dung trong phần tử trở nên mờ đi mà có thể thấy được nền phía sau.
Lưu ý rằng khi sử dụng opacity, tất cả các phần tử con của phần tử đó cũng sẽ bị ảnh hưởng bởi độ mờ, và sẽ không thể chọn đúng phần tử con dựa trên pointer events.