CSS | fill-opacity Property
The fill-opacity property is used to set the opacity of the paint server that is applied to the shape.
Syntax:
fill-opacity: [0-1] | <percentage>
Property Values:
- Value between 0 and 1: It is used to set the opacity of the fill-in decimal values. The value 0 means that the fill is completely transparent and invisible. The value 1 means that the fill is fully opaque and visible. A decimal value between these two values would give a semi-transparent fill.
Example:
<!DOCTYPE html><html><head><title>CSS | fill-opacity</title><style>.opacity1 {/* completelyvisible fill */fill-opacity: 1.0;fill: green;}.opacity2 {fill-opacity: 0.5;fill: green;}.opacity3 {fill-opacity: 0.25;fill: green;}.opacity4 {/* completelytransparent fill */fill-opacity: 0;fill: green;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | fill-opacity</b><divclass="container"><svgheight="250px"width="500px"version="1.1"><circleclass="opacity1"cx="100"cy="100"r="50"/><circleclass="opacity2"cx="250"cy="100"r="50"/><circleclass="opacity3"cx="400"cy="100"r="50"/><circleclass="opacity4"cx="400"cy="100"r="50"/></svg></div></body></html>Output:
- percentage: It is used to set the opacity of the fill in percentage values. A value of 0% means that the fill is completely transparent and invisible. A value of 100% means that the fill is fully opaque and visible. A percentage value between these two values would give a semi-transparent fill.
Example:
<!DOCTYPE html><html><head><title>CSS | fill-opacity</title><style>.opacity1 {/* completely visiblefill */fill-opacity: 100%;fill: green;}.opacity2 {fill-opacity: 50%;fill: green;}.opacity3 {fill-opacity: 25%;fill: green;}.opacity4 {/* completelytransparent fill */fill-opacity: 0%;fill: green;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | fill-opacity</b><divclass="container"><svgheight="250px"width="500px"version="1.1"><rectclass="opacity1"x="25"y="10"height="150"width="100"/><rectclass="opacity2"x="175"y="10"height="150"width="100"/><rectclass="opacity3"x="325"y="10"height="150"width="100"/><rectclass="opacity4"x="325"y="10"height="150"width="100"/></svg></div></body></html>Output:
Supported Browsers: The browser supported by fill-opacity property are listed below:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9
Please Login to comment...