color-adjust
CSS property sets what, if anything, the
用户代理
may do to optimize the appearance of the element on the output device.
By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.
color-adjust: economy; color-adjust: exact;
color-adjust
property's value must be one of the following keywords.
economy
The user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for. For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. This is the default.
exact
The element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better. The appearance of the content should not be changed except by the user's request. For example, a page might include a list of information with rows whose background colors alternate between white and a light grey. Removing the background color would decrease the legibility of the content.
There are a number of reasons a browser might wish to deviate from the specified appearance, such as:
Any options the user agent offers the user to allow them to control the use of color and images will take priority over the value of
color-adjust
. In other words, there isn't any guarantee that
color-adjust
will do anything. Not only can the user override the behavior, but each user agent is allowed to decide for itself how to handle
color-adjust
in any given situation.
| 初始值 |
economy
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
economy | exact
In this example, a box is shown which uses a
background-image
and a translucent
linear-gradient()
function atop a black background color to have a dark blue gradient behind medium red text. For whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use
color-adjust: exact
to tell the browser not to make color or style adjustments to the box when rendering it.
.my-box {
background-color: black;
background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
color: #900;
width: 15rem;
height: 6rem;
text-align: center;
font: 24px "Helvetica", sans-serif;
display: flex;
align-items: center;
justify-content: center;
color-adjust: exact;
}
<div class="my-box"> <p>Need more contrast!</p> </div>
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Color Adjustment Module Level 1
The definition of 'color-adjust' in that specification. |
编者草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
color-adjust
|
Chrome
完整支持
49
Alternate Name
|
Edge
完整支持
79
Alternate Name
|
Firefox 完整支持 48 | IE 不支持 No |
Opera
完整支持
15
Alternate Name
|
Safari
完整支持
6
Alternate Name
|
WebView Android
完整支持
49
Alternate Name
|
Chrome Android
完整支持
49
Alternate Name
|
Firefox Android 完整支持 48 |
Opera Android
完整支持
36
Alternate Name
|
Safari iOS
完整支持
6
Alternate Name
|
Samsung Internet Android
完整支持
5.0
Alternate Name
|
完整支持
不支持
使用非标名称。
color
,
background-color
,
border-color
,
outline-color
,
text-decoration-color
,
text-emphasis-color
,
text-shadow
,
caret-color
，和
column-rule-color
background-image