The Color-adjust property has proved itself to be useful when it comes to printing documents. The browsers can change the colors and the appearance of the element so as to prevent that color-adjust property is used.
Syntax:
color-adjust: economy | exact
Property values:
- economy: In this, the browser may leave the images in order to adjust the colors of the text such that making it more readable.
Syntax:
color-adjust: economy
Example:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 300px;
height: auto;
border-radius: 50% 50%;
background-color: black;
background-image: linear-gradient(
rgba(17, 199, 0, 0.5), rgb(255, 255, 255)); color: rgb(0, 0, 0);
text-align: center;
font: 24px "Helvetica", sans-serif;
display: grid;
justify-content: center;
color-adjust: economy;
} </style>
<body>
<h1>color-adjust: economy</h1>
<div id="box">
<p>Geeks for Geeks</p>
</div>
</body>
</html>
|
Output:
- exact: In this, the appearance of the page must not change without the user’s request.
Syntax:
color-adjust: exact
Example:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 300px;
height: auto;
border-radius: 50% 50%;
background-color: black;
background-image: linear-gradient(
rgba(17, 199, 0, 0.5), rgb(255, 255, 255)); color:#fff;
text-align: center;
font: 24px "Helvetica", sans-serif;
display: grid;
justify-content: center;
color-adjust: exact;
} </style>
<body>
<h1>color-adjust: exact</h1>
<div id="box">
<p>Geeks for Geeks</p>
</div>
</body>
</html>
|
Output:
Browsers Supported:
- Firefox
- Opera
- Mozilla firefox
- Safari
- Edge