fill-opacity

Cú pháp

/* Giá trị số và phần trăm */
fill-opacity: 0.2;
fill-opacity: 20%;

/* Giá trị toàn cục */
fill-opacity: inherit;
fill-opacity: initial;
fill-opacity: revert;
fill-opacity: revert-layer;
fill-opacity: unset;

Giá trị

Các giá trị <number> và <percentage> biểu thị độ mờ của fill của phần tử.

<number>

Giá trị số từ 0 đến 1, bao gồm cả hai đầu.

<percentage>

Giá trị phần trăm từ 0% đến 100%, bao gồm cả hai đầu.

Với 0 hoặc 0%, phần tử hoàn toàn trong suốt. Với 1 hoặc 100%, phần tử hoàn toàn mờ đục. Với các giá trị ở giữa, phần tử là bán trong suốt, với nội dung phía sau phần tử có thể nhìn thấy.

Định nghĩa hình thức

Cú pháp hình thức

fill-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>  

Ví dụ

Xác định độ mờ fill của các phần tử SVG

Ví dụ này minh họa trường hợp sử dụng cơ bản của fill-opacity, cách thuộc tính CSS fill-opacity có quyền ưu tiên hơn thuộc tính fill-opacity và không có hiệu lực trên bất kỳ stroke nào được áp dụng cho hình dạng.

HTML

Chúng ta bao gồm một số phần tử đồ họa SVG khác nhau và đặt thuộc tính fill-opacity của mỗi phần tử thành 1 (trừ line), có nghĩa là fill của mỗi phần tử là mờ đục. Thuộc tính SVG fill-opacity không áp dụng cho <line>.

<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill-opacity="1" />
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
  <circle cx="25" cy="75" r="20" fill-opacity="1" />
  <ellipse cx="75" cy="75" rx="20" ry="10" fill-opacity="1" />
  <line x1="50" x2="90" y1="40" y2="60" stroke="black" stroke-width="5" />
  <polyline
    points="60 90 65 100 70 95 75 110 80 105 85 120 90 115 95 130 100 125"
    fill-opacity="1" />
  <path d="M20,130 Q40,105 50,130 T90,130" fill-opacity="1" />
</svg>

CSS

Với CSS, chúng ta sử dụng thuộc tính fill-opacity để ghi đè giá trị của thuộc tính SVG fill-opacity, cho mỗi phần tử SVG một giá trị khác nhau.

Chúng ta thêm stroke vào hình tròn và hình elip, để minh họa rằng độ mờ của nét vẽ không bị ảnh hưởng bởi thuộc tính fill-opacity.

Các kiểu SVG khác được đặt, bao gồm hình nền để độ mờ của mỗi phần tử dễ nhìn hơn. Những điều này không được hiển thị để ngắn gọn.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  background: repeating-linear-gradient(
    to bottom right,
    transparent 0 10px,
    #cccccc 10px 11px
  );
}

svg > * {
  fill: black;
}
rect:last-of-type {
  fill-opacity: 0.1;
}
circle {
  fill-opacity: 0.6;
}
ellipse {
  fill-opacity: 40%;
}
line {
  fill-opacity: 10%;
}
polyline {
  fill-opacity: 50%;
}
path {
  fill-opacity: 0.5;
}

circle,
ellipse {
  stroke: black;
  stroke-width: 3px;
}

Kết quả

Chỉ có hai phần tử hoàn toàn mờ đục: hình chữ nhật đầu tiên và đường thẳng. Hình chữ nhật đầu tiên không khớp với bất kỳ bộ chọn nào, vì vậy không có CSS nào được áp dụng và fill hoàn toàn mờ đục. line khớp với fill-opacity: 10%. Tuy nhiên, đường thẳng không có thao tác vẽ fill - chỉ có stroke mới hiển thị - vì vậy khai báo không có hiệu lực.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Thuộc tính SVG fill-opacity
• Thuộc tính trình bày: fill-opacity, clip-rule, color-interpolation-filters, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, và vector-effect
• opacity
• background-color
• <color>
• Kiểu dữ liệu <basic-shape>