Cách thay đổi độ mờ của nền phần tử mà không ảnh hưởng đến phần tử con hoặc nội dung văn bản
Chủ đề: HTML / CSSBài trước|Bài tiếp
Trả lời: Sử dụng màu CSS RGBA
Không có thuộc tính CSS nào như "background-opacity" mà bạn chỉ có thể sử dụng để thay đổi độ mờ hoặc độ trong suốt của nền phần tử mà không ảnh hưởng đến các phần tử con của nó. Mặt khác, nếu bạn cố gắng làm điều này bằng cách sử dụng thuộc tính CSS opacity, nó sẽ không chỉ thay đổi độ mờ của nền mà còn thay đổi độ mờ của tất cả các phần tử con.
Trong những trường hợp như vậy, bạn có thể sử dụng màu RGBA được giới thiệu trong CSS3 bao gồm độ trong suốt alpha như một phần của giá trị màu. Sử dụng màu RGBA, bạn có thể đặt màu của nền cũng như độ trong suốt của nó, như được minh họa trong ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style>
body {
background-image: url("images/pattern.jpg");
}
p {
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the text content.</p>
</body>
</html>Ngoài ra, bạn có thể sử dụng hình ảnh PNG trong suốt để đạt được hiệu ứng này.
Câu hỏi liên quan
Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:
- Tạo danh sách tùy chỉnh ul li với hình ảnh?
- Làm sao để thay đổi kích thước hình ảnh bằng CSS?
- Hướng dẫn cách làm nổi bật nền của hàng trong bảng luân phiên bằng CSS
- Độ dài tối đa của tiêu đề và thẻ mô tả trong HTML cho SEO là bao nhiêu
- Cách xóa khoảng trắng thừa bên dưới hình ảnh bằng CSS