Không trong suốt div bên trong div trong suốt

Question

Tôi đang tạo trang web có div trong suốt.

Tôi muốn thêm một div không minh bạch bên trong div trong suốt đó và tôi thấy rằng nó cũng trong suốt.

Tôi cố gắng đặt div bên trong thành độ mờ: 1 nhưng nó không hoạt động.

Tôi nên làm gì?

Answer 1

Có hai cách mà tôi biết để làm việc xung quanh này:

• minh bạch Fake trên div chứa bằng cách sử dụng một PNG trong suốt làm hình nền.
• Phân tách các div để chúng cạnh nhau và sau đó sử dụng vị trí tương đối hoặc tuyệt đối để sắp xếp chúng.

Answer 2

Điều này không hoạt động trong CSS. Trong quá khứ tôi đã sử dụng định vị để đẩy div không trong suốt chứa nội dung vào div trong suốt. Tôi không thể đào lên một số mã cũ từ các dự án của tôi, nhưng tôi đã tìm thấy bài viết trên blog này:

Non-transparent elements inside transparent elements

Answer 3

tôi tìm thấy một nơi nào đó trong khi nghiên cứu CSS3 và xin lỗi mà tôi không thể tái gọi nơi để tín dụng tác giả thích hợp.

Nhưng nếu bạn đang tìm màu nền bán trong suốt trên div. Thay vì thiết lập màu và kiểm soát độ trong suốt với các thuộc tính opacity/alpha, hãy đặt thuộc tính màu nền trực tiếp bằng định dạng rgba (rrr, ggg, bbb, aaa). Điều này sẽ ngăn chặn bất kỳ phần tử con nào thừa hưởng bất kỳ sự minh bạch nào.

ví dụ:

#mydiv { background-color: rgba(128,64,0,0.75); } 

Answer 4

sử dụng nền, đệm, nền gốc để kiểm soát phần đệm và chỉ mục z để kiểm soát vị trí của phần tử. Ví dụ:

#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}