Không có thuộc tính background-opacity trong CSS, nhưng bạn có thể giả mạo nó bằng cách chèn một phần tử giả có độ mờ thông thường bằng kích thước chính xác của phần tử đằng sau nó

div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }

​

Trong CSS, thuộc tính “background-color” được sử dụng để gán một màu khác cho nền. Hơn nữa, sử dụng thuộc tính màu nền theo một cách cụ thể cũng có thể đặt độ trong suốt của các phần tử khác nhau

Thí dụ

Đây là trang HTML của chúng tôi với hai nền, một là hình ảnh và nền kia là nền của vùng chứa. Chúng tôi muốn làm cho nền của vùng chứa trong suốt để chúng tôi có thể nhìn xuyên qua hình ảnh được thêm vào vì độ trong suốt của vùng chứa

In our HTML file, we have added a “

” tag with a class named “bg” inside a div element and placed it inside the “” tag:

< div >

< h1 class="bg">Transparent

Trong tệp CSS, hãy sử dụng “. ” trước “bg” để khai báo nó là một lớp. Sau đó, thêm thuộc tính màu nền cùng với giá trị rgba, gán phần đệm “100px” và đặt màu văn bản là “trắng”. Vì bảng màu rgba có định dạng phù hợp, chúng tôi sẽ đặt tất cả các giá trị của nó thành 0 ngoại trừ giá trị cuối cùng. Đặt giá trị cuối cùng thành “. 25” để có bóng râm trong suốt. Tuy nhiên, nó có thể được thay thế bằng “0” để có bóng trong suốt rõ ràng

Trong bước tiếp theo, hãy gán cho div một phần đệm “200px” và đặt URL của hình nền mong muốn

Ghi chú. Chúng tôi chưa xóa màu nền được đặt trước đó là “aqua”. Do đó, nền trong suốt của vùng chứa sẽ hiển thị rõ ràng bằng bảng màu rgba

. bg{màu nền. màu nước;màu nền. rgba(0,0 . 25);màu. màu trắng;phần đệm. 100px;}div { . 200px;nền. URL(Bản gốc. jpg);}