lighting-color

Cú pháp

/* Giá trị <color> */
lighting-color: red;
lighting-color: hsl(120deg 75% 25% / 60%);
lighting-color: currentColor;

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

Giá trị

<color>

Màu sắc của ánh sáng. Đây có thể là bất kỳ giá trị <color> CSS hợp lệ nào.

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

Cú pháp hình thức

lighting-color = 
  <color>  

Ví dụ

Xác định màu của bộ lọc ánh sáng

Ví dụ này minh họa trường hợp sử dụng cơ bản của lighting-color, và cách thuộc tính CSS lighting-color được ưu tiên hơn thuộc tính lighting-color.

HTML

Chúng ta có một SVG với hai phần tử <filter>, một với <feDiffuseLighting> và một với <feSpecularLighting> là phần tử con. Mỗi phần tử bao gồm thuộc tính SVG lighting-color xác định màu ánh sáng là red. Cả hai phần tử con này đều có một <fePointLight>, phần tử con bắt buộc đặt nguồn sáng. Chúng ta đã thêm hai phần tử <rect> với thuộc tính filter; đây là nơi các bộ lọc sẽ được hiển thị.

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feDiffuseLighting lighting-color="red">
      <fePointLight x="75" y="30" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="flood2">
    <feSpecularLighting specularExponent="5" lighting-color="red">
      <fePointLight x="225" y="75" z="5" />
    </feSpecularLighting>
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

Chúng ta xác định kích thước và vị trí của các <rect> bằng thuộc tính CSS height, width, x, và y. Chúng ta cũng thêm hình nền cho SVG để làm cho độ trong suốt alpha của màu rõ ràng hơn:

svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #cccccc 0px 10px
  );
}

rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}

#r2 {
  x: 150px;
}

Sau đó chúng ta áp dụng các giá trị màu ánh sáng khác nhau cho các phần tử con của bộ lọc bằng thuộc tính CSS lighting-color. Chúng ta sử dụng màu có tên và màu thập lục phân 3 chữ số, nhưng có thể sử dụng bất kỳ cú pháp màu CSS hợp lệ nào:

feDiffuseLighting {
  lighting-color: blue;
}

feSpecularLighting {
  lighting-color: #ff0099;
}

Kết quả

Các thuộc tính đã xác định màu của cả hai bộ lọc ánh sáng là red, nhưng các giá trị này bị ghi đè bởi các giá trị CSS lighting-color.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• color
• fill
• flood-color
• stop-color
• stroke
• flood-opacity
• background-color
• <color>
• <filter-function>
• Thuộc tính SVG lighting-color