opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính opacity chỉ định độ trong suốt của một đối tượng hoặc một nhóm đối tượng, tức là mức độ mà nền phía sau phần tử bị phủ lên.

Note: Với vai trò là một presentation attribute, opacity cũng có thuộc tính CSS tương ứng: opacity. Khi cả hai đều được chỉ định, thuộc tính CSS sẽ được ưu tiên.

Bạn có thể dùng thuộc tính này với các phần tử SVG sau:

Không giống như fill-opacity, stroke-opacity, và stop-opacity, vốn được áp dụng cho từng thao tác riêng lẻ và được kết xuất khi phần tử được kết xuất, opacity được áp dụng cho toàn bộ đối tượng hoặc nhóm, và giống như một thao tác hậu xử lý trên hình ảnh đã kết xuất của đối tượng hoặc nhóm đó. Vì vậy, khi bạn có cả opacity và các thuộc tính opacity khác trong cùng một khu vực, chúng sẽ chồng lên nhau và làm cho độ mờ bị nhân lên.

Ví dụ

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" stop-color="skyblue" />
      <stop offset="100%" stop-color="seagreen" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>

Lưu ý sử dụng

Giá trị mặc định	`1`
Giá trị	`<alpha-value>`
Có thể animate	Có

<alpha-value>: Thiết lập độ mờ đồng nhất áp dụng cho toàn bộ đối tượng, dưới dạng <number>. Bất kỳ giá trị nào ngoài phạm vi 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt) sẽ được giới hạn trong phạm vi này.

Thông số kỹ thuật

Specification
CSS Color Module Level 4 # propdef-opacity
Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties

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

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content