Phông nền trong HTML là gì?

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 onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="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 onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

var dialog = document.querySelector('dialog');
function openDialog() {  
  dialog.showModal();
}
function closeDialog() {  
  dialog.close();
}

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 onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

/* 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;

<dialog>
  <h2>I'm a dialog window</h2>
  <button onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

<dialog>
  <h2>I'm a dialog window</h2>
  <button onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

<dialog>
  <h2>I'm a dialog window</h2>
  <button onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

<dialog>
  <h2>I'm a dialog window</h2>
  <button onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>