Hướng dẫn how do you blur content in css? - làm thế nào để bạn làm mờ nội dung trong css?

Thử nó

Cú pháp

Thông số

radius

Bán kính của mờ, được chỉ định là . Nó xác định giá trị của độ lệch chuẩn đối với hàm Gaussian, tức là, có bao nhiêu pixel trên màn hình hòa trộn với nhau; Do đó, một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn. Một giá trị của 0 để lại đầu vào không thay đổi. Giá trị ban đầu cho phép nội suy là 0.

Ví dụ

Đặt một vệt mờ với pixel và với REM

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

Xem thêm

Thử nó

Cú pháp

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

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

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

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

Không có bộ lọc được áp dụng cho phông nền.

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

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

Một danh sách phân tách không gian của S hoặc bộ lọc SVG sẽ được áp dụng cho bối cảnh.

Định nghĩa chính thức

Cú pháp chính thức

backdrop-filter = 
  none                 |
    
 = 
  [  |  ]+
 = 
           |
     |
       |
    |
      |
     |
         |
        |
          |
  



 = 
 blur( ? )
 = 
 brightness( [  |  ]? )
 = 
 contrast( [  |  ]? )
 = 
 drop-shadow( [ ? && {2,3} ] )
 = 
 grayscale( [  |  ]? )
 = 
 hue-rotate( [  |  ]? )
 = 
 invert( [  |  ]? )



 = 
 opacity( [  |  ]? )
 = 
 sepia( [  |  ]? )
 = 
 saturate( [  |  ]? )

Ví dụ

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)p>
  div>
div>

Kết quả

Xem thêm