Giá trị mặc định. không kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. vật. Phong cách. backdropFilter="thang độ xám(100%)"
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Các số theo sau -webkit- chỉ định phiên bản đầu tiên hoạt động với tiền tố
Thuộc tínhbackdrop-filter76. 017. 070. 0*9. 0 -webkit-63. 0
* Để làm việc này, hãy mở về. cấu hình và đặt bố cục. css. bộ lọc phông nền. đã bật thành đúng và cả gfx. webrender. tất cả các tùy chọn cần phải được đặt thành true
Phần tử giả CSS ::backdrop tạo phông nền bao phủ toàn bộ chế độ xem và được hiển thị ngay bên dưới <dialog> hoặc bất kỳ phần tử nào chuyển sang chế độ toàn màn hình bằng API toàn màn hình
dialog::backdrop { background-color: darkorange; }dòng dưới cùng. chúng tôi có thứ gì đó để kết nối để tạo kiểu nền đầy đủ phía sau các phần tử khi trình duyệt ở chế độ toàn màn hình. Và khi chúng ta nói “chế độ toàn màn hình”, điều chúng ta đang nói đến là trình duyệt chiếm toàn bộ màn hình của một màn hình — đừng nhầm lẫn với chế độ xem của trình duyệt. Thông thường, chế độ toàn màn hình được kích hoạt bởi một tùy chọn trong hệ điều hành để mở rộng cửa sổ
::backdrop không kế thừa từ bất kỳ phần tử nào và không được kế thừa từ. Vì vậy, không có thác nào xảy ra khi bạn có thể gặp xung đột giữa phông nền của hai yếu tố
Tạo kiểu phông nền của hộp thoại
Hãy xem xét phần tử <dialog> sau trong HTML
<dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>::backdrop có thể được sử dụng để tạo kiểu phía sau <dialog> khi hộp thoại được hiển thị với <dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>3, tính năng này hiện đang thử nghiệm nhưng là thứ cung cấp cho ::backdrop
Bây giờ, nếu chúng ta nhấp vào nút và mở hộp thoại, CSS sau sẽ hoạt động
dialog::backdrop { background-color: darkorange; background-image: linear-gradient( 130deg,#ff7a18, #af002d 41.07%, #319197 76.05% ); }Mở phần tử <dialog> trong bản demo sau và xem kiểu mà chúng tôi đã áp dụng cho phông nền của hộp thoại
Dự phòng nhúng CodePen
Tạo kiểu phông nền của một phần tử ở chế độ toàn màn hình
Khi phương tiện, chẳng hạn như hình ảnh và video, chuyển sang chế độ toàn màn hình, có thể chúng sẽ không bao phủ toàn bộ chế độ xem. Giống như, có thể có không gian trống xung quanh nó. Hiện tại, kiểu phông nền mặc định của Chrome trông như thế này
dialog::backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(0, 0, 0, 0.1); }Với ::backdrop, chúng ta có thể tự tạo kiểu cho nó hoặc đơn giản là chỉnh sửa những gì đã có. Ví dụ, nền tối hơn một chút thì sao?
video::backdrop { background: hsla(0, 0%, 0%, .5); }Phông nền trong bản trình diễn sau có thể nhìn thấy do chiều rộng của video hẹp hơn chiều rộng của toàn bộ khung nhìn
Dự phòng nhúng CodePen
Biến đổi, hoạt ảnh và trạng thái di chuột
Vì không có hạn chế về những thuộc tính mà chúng ta có thể khai báo trên phần tử giả này, nên có thể thêm hoạt ảnh và biến đổi thành phông nền — hoặc thậm chí thay đổi kiểu trên các trạng thái, như di chuột
Thuộc tính CSS <dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>7 cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của phần tử ít nhất trong suốt một phần
Thử nó
cú pháp
/* Keyword value */ backdrop-filter: none; /* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* Multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* Global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: revert-layer; backdrop-filter: unset;
giá trị
<dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>8
Không có bộ lọc nào được áp dụng cho phông nền
<dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>9Danh sách <dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>0 được phân tách bằng dấu cách hoặc bộ lọc SVG sẽ được áp dụng cho phông nền
định nghĩa chính thức
Giá trị ban đầu<dialog> <h2>I'm a dialog window</h2> <button title="closeDialog()">Close</button> </dialog> <button title="openDialog()">Open dialog</button>8Áp dụng cho tất cả các phần tử;