Свойство CSS `fill-opacity`

Свойство fill-opacity CSS задаёт непрозрачность операции заливки (цветом, градиентом, узором и т. д.), применяемой к фигурам SVG или текстовым элементам для заливки элемента. Свойство задаёт непрозрачность только fill элемента; на обводку оно не влияет. Если свойство задано, оно переопределяет атрибут fill-opacity элемента.

Синтаксис

/* numeric and percentage values */
fill-opacity: 0.2;
fill-opacity: 20%;

/* Global values */
fill-opacity: inherit;
fill-opacity: initial;
fill-opacity: revert;
fill-opacity: revert-layer;
fill-opacity: unset;

Значения

Значения <number> и <percentage> задают непрозрачность fill элемента.

<number>

Числовое значение от 0 до 1 включительно.

<percentage>

Процентное значение от 0% до 100% включительно.

При значениях 0 или 0% элемент полностью прозрачен. При значениях 1 или 100% элемент полностью непрозрачен. При промежуточных значениях элемент полупрозрачен, и сквозь него виден контент, расположенный позади.

Формальное определение

Формальный синтаксис

fill-opacity = 
  <'opacity'>

Примеры

Задание непрозрачности заливки элементов SVG

В этом примере показан базовый сценарий использования fill-opacity, а также то, как свойство CSS fill-opacity имеет приоритет над атрибутом fill-opacity и не влияет на stroke, применённую к фигуре.

HTML

Мы добавляем несколько различных графических элементов SVG и задаём для атрибута fill-opacity каждого из них значение 1 (кроме line), то есть заливка каждого элемента непрозрачна. Атрибут SVG fill-opacity не применяется к <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

С помощью CSS мы используем свойство fill-opacity, чтобы переопределить значение атрибута SVG fill-opacity и задать каждому элементу SVG своё значение.

Мы добавляем stroke к кругу и эллипсу, чтобы показать, что свойство fill-opacity не влияет на непрозрачность обводки.

Также заданы другие стили SVG, в том числе фоновое изображение, чтобы непрозрачность каждого элемента было легче увидеть. Для краткости они не показаны.

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;
}

Результаты

Полностью непрозрачны только два элемента: первый прямоугольник и линия. Первый прямоугольник не соответствует ни одному из селекторов, поэтому к нему не применяется CSS, а fill полностью непрозрачен. Элемент line соответствует селектору, для которого задано fill-opacity: 10%. Однако для линии не выполняется операция рисования fill — видна только stroke, — поэтому объявление не оказывает эффекта.

Спецификации

Совместимость с браузерами

См. также

• Атрибут SVG fill-opacity
• Свойства представления: 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 и vector-effect
• opacity
• background-color
• <color>
• Тип данных <basic-shape>