Hướng dẫn
Quảng cáo

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:

Advertisements