HTML Guides for opacity

The opacity property takes a number such as 0.5 or a percentage such as 50%, so a quoted value like "" is invalid.

opacity sets how transparent an element and its content are, from 0 (fully transparent) to 1 (fully opaque, the initial value). Quotes turn whatever is between them into a CSS string, and opacity doesn't accept strings. "" is an empty string, and "0.5" fails for the same reason even though the number inside it is fine. Browsers drop the declaration, so the element keeps the opacity set by other rules, or stays fully opaque.

The empty pair of quotes often comes from a template or script that wraps the value in quotes and has nothing to print, as in style='opacity: "{{ opacity }}"' when the setting is empty. Write the number without quotes, or leave the declaration out when there's no value. Any other value the property can't parse, such as the word undefined printed by a script, gets the same message.

Numbers outside the 0 to 1 range, such as 1.5, are valid: browsers clamp them to the nearest limit. Global keywords such as inherit work too.

Invalid example

<div class="banner" style='opacity: "";'>

<p>Spring offers</p>

</div>

Valid example

<div class="banner" style="opacity: 0.8;">

<p>Spring offers</p>

</div>