-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
219 lines (177 loc) · 6.03 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
---
title: contrast()
slug: Web/CSS/filter-function/contrast
page-type: css-function
browser-compat: css.types.filter-function.contrast
---
{{CSSRef}}
The **`contrast()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) adjusts the contrast of the input image. Its result is a {{cssxref("<filter-function>")}}.
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
## Syntax
```css
contrast(amount)
```
### Values
- `amount`
- : The contrast of the result, specified as a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}. A value under `100%` decreases the contrast, while a value over `100%` increases it. A value of `0` or `0%` will create an image that is completely gray, while a value of `1` or `100%` leaves the input unchanged. Negative values are not allowed. The initial value for {{Glossary("interpolation")}} is `1`.
The following are pairs of equivalent values:
```css
contrast(0) /* Completely gray */
contrast(0%)
contrast(0.65) /* 65% contrast */
contrast(65%)
contrast(1) /* No effect */
contrast(100%)
contrast(2) /* Double contrast */
contrast(200%)
```
### Formal syntax
{{csssyntax}}
## Examples
### With the backdrop-filter property
This example applies a `contrast()` filter via the {{cssxref("backdrop-filter")}} CSS property to the paragraph and monospaced text, color shifting to the area behind the `<p>` and `<code>`.
```css
.container {
background: url(image.jpg) no-repeat center / contain #339;
}
p {
backdrop-filter: contrast(0.5);
}
code {
backdrop-filter: contrast(0.15);
}
```
```css hidden
.container {
padding: 3rem;
width: 30rem;
}
p {
padding: 0.5rem;
color: #ffffff;
font-family: sans-serif;
}
```
```html hidden
<div class="container" style="background-image: url(unity_for_the_people.jpg);">
<p>
Always ensure there is enough contrast between text and all background
colors. If you think your text may land on top of a background image,
include a <code>backdrop-filter</code>. Reducing the contrast of background
colors with the <code>contrast()</code> filter may improve legibility but
does not guarantee accessibility.
</p>
</div>
```
{{EmbedLiveSample('With_the_backdrop-filter_property','100%','260')}}
### With the filter property
This example applies a `contrast()` filter via the {{cssxref("filter")}} CSS property, changing contrast by shifting colors of the entire element, including content, border, background, and shadows.
```css
p:first-of-type {
filter: contrast(30%);
}
p:last-of-type {
filter: contrast(300%);
}
```
```css hidden
p {
text-shadow: 2px 2px blue;
background-color: magenta;
color: palegoldenrod;
border: 1em solid rebeccapurple;
box-shadow:
inset -5px -5px red,
5px 5px yellow;
padding: 0.25rem;
font-size: 1.25rem;
font-family: sans-serif;
width: 85vw;
}
```
```html hidden
<p>This paragraph has reduced contrast.</p>
<p>This paragraph has normal contrast.</p>
<p>This paragraph has increased contrast.</p>
```
{{EmbedLiveSample('With_the_filter_property','100%','320')}}
### With url() and the SVG contrast filter
The SVG {{SVGElement("filter")}} element is used to define custom filter effects that can then be referenced by [`id`](/en-US/docs/Web/HTML/Global_attributes#id). The `<filter>`'s {{SVGElement("feComponentTransfer")}} primitive enables pixel-level color remapping. Given the following:
```svg
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5"/>
<feFuncG type="linear" slope="2" intercept="-0.5"/>
<feFuncB type="linear" slope="2" intercept="-0.5"/>
</feComponentTransfer>
</filter>
```
```css hidden
.svgFilterLive {
filter: url(#contrast2);
}
```
These values produce the same results:
```css
filter: contrast(200%);
filter: url(#contrast); /* with embedded SVG */
filter: url(folder/fileName.svg#contrast); /* external svg filter definition */
```
This example shows three images: the image with a `contrast()` filter function applied, the image with an equivalent `url()` filter applied, and the original images for comparison:
```html hidden
<table cellpadding="5">
<thead>
<tr>
<th><code>contrast()</code></th>
<th><code>url()</code></th>
<th>Original image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img style="filter: contrast(200%)" src="flag.jpg" alt="Pride flag" />
</td>
<td>
<img class="svgFilterLive" src="flag.jpg" alt="Pride flag" />
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg"
viewBox="0 0 240 151"
height="0"
width="0"
style="overflow: visible"
color-interpolation-filters="sRGB">
<filter id="contrast2">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5" />
<feFuncG type="linear" slope="2" intercept="-0.5" />
<feFuncB type="linear" slope="2" intercept="-0.5" />
</feComponentTransfer>
</filter>
</svg>
</td>
<td>
<img src="flag.jpg" alt="Pride flag" />
</td>
</tr>
</tbody>
</table>
```
{{EmbedLiveSample('With_url()_and_the_SVG_contrast_filter','100%','280')}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module
- The other {{cssxref("<filter-function>")}} functions available to be used in values of the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties include:
- {{cssxref("filter-function/blur", "blur()")}}
- {{cssxref("filter-function/brightness", "brightness()")}}
- {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
- {{cssxref("filter-function/grayscale", "grayscale()")}}
- {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
- {{cssxref("filter-function/invert", "invert()")}}
- {{cssxref("filter-function/opacity", "opacity()")}}
- {{cssxref("filter-function/saturate", "saturate()")}}
- {{cssxref("filter-function/sepia", "sepia()")}}