-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
214 lines (167 loc) · 6.46 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
---
title: brightness()
slug: Web/CSS/filter-function/brightness
page-type: css-function
browser-compat: css.types.filter-function.brightness
---
{{CSSRef}}
The **`brightness()`** [CSS](/en-US/docs/Web/CSS) {{cssxref("<filter-function>")}} applies a linear multiplier value on an element or an input image, making the image appear brighter or darker.
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
## Syntax
```css
brightness(amount)
```
### Values
- `amount`
- : Brightness specified as a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}. A value less than `100%` darkens the input image or element, while a value over `100%` brightens it. A value of `0%` creates a completely black image or element, while a value of `100%` leaves the input unchanged. Other values between `0%` to `100%` have a linear multiplier effect. Values greater than `100%` are allowed, providing brighter results. The initial value for {{Glossary("interpolation")}} is `1`. Negative values are not allowed. The default value, when nothing is specified, is `1`.
The following are pairs of equivalent values:
```css
brightness(0) /* Brightness is reduced to zero, so input turns black */
brightness(0%)
brightness(0.4) /* Brightness of input is reduced to 40%, so input is 60% darker */
brightness(40%)
brightness(1) /* Brightness of input is not changed */
brightness(100%)
brightness(2) /* Brightness of input is doubled */
brightness(200%)
```
### Formal syntax
{{csssyntax}}
## Examples
### Applying brightness using the backdrop-filter property
This example shows how to apply the `brightness()` filter to a paragraph via the [`backdrop-filter`](/en-US/docs/Web/CSS/backdrop-filter) CSS property.
#### CSS
```css
.container {
background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
backdrop-filter: brightness(150%);
text-shadow: 2px 2px #ffffff;
}
```
```css hidden
.container {
padding: 5rem 3rem 1rem;
width: 30rem;
}
p {
padding: 0.5rem;
color: #000000;
font-size: 2rem;
font-family: sans-serif;
}
```
```html hidden
<div class="container" style="background-image: url(be_fierce.jpg);">
<p>
Text on images can be illegible and inaccessible even with a drop shadow.
</p>
</div>
```
#### Result
{{EmbedLiveSample('Applying_brightness_using_the_backdrop_filter_property', '100%', '280')}}
In this example, the colors in the area behind the `<p>` element shift linearly. If the `backdrop-filter` property was set to `brightness(0%)`, the `<div>` area with the `<p>` element would have been black and hidden the image behind. At `brightness(100%)`, the `<div>` area color would be the same as the input `#d4d5b2`, and the image behind would be completely transparent. With the brightness set to `150%` as in this example, the colors in the image behind are getting hidden by the brightness of the `<div>` element.`
### Applying brightness using the filter property
In this example, a `brightness()` filter is applied to the entire element, including content, border, and background image via the [`filter`](/en-US/docs/Web/CSS/filter) CSS property. The result shows three variations of different brightness values.
```css
p:first-of-type {
filter: brightness(50%);
}
p:last-of-type {
filter: brightness(200%);
}
```
```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 brightness.</p>
<p>This paragraph has normal brightness.</p>
<p>This paragraph has increased brightness.</p>
```
{{EmbedLiveSample('Applying_brightness_using_the_filter_property','100%','280')}}
### Applying brightness using the url() SVG brightness 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>` element's {{SVGElement("feComponentTransfer")}} primitive enables pixel-level color remapping.
In this example, to create a filter that darkens the content on which it is applied by 25% (i.e., 75% of the original brightness), the `slope` attribute is set to `0.75`. We can then reference the filter by `id`.
Given the following:
```css hidden
.filter {
filter: brightness(0.75);
}
svg {
position: absolute;
}
```
```html
<svg role="none">
<filter id="darken25" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="linear" slope="0.75" />
<feFuncG type="linear" slope="0.75" />
<feFuncB type="linear" slope="0.75" />
</feComponentTransfer>
</filter>
</svg>
```
The following declarations produce similar effects:
```css
filter: brightness(75%);
filter: url(#darken25); /* with embedded SVG */
filter: url(folder/fileName.svg#darken25); /* external svg filter definition */
```
In the images below, the first one has a `brightness()` filter function applied, the second one has a similar SVG brightness function applied, and the third is the original image for comparison.
```html hidden
<table cellpadding="5">
<thead>
<tr>
<th>Live example</th>
<th>SVG Equivalent</th>
<th>Original image</th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="filter" src="flag.jpg" alt="darkened pride flag" /></td>
<td>
<img
style="filter: url(#darken25)"
src="flag.jpg"
alt="darkened pride flag" />
</td>
<td>
<img src="flag.jpg" alt="Pride flag" />
</td>
</tr>
</tbody>
</table>
```
{{EmbedLiveSample('blur','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/contrast", "contrast()")}}
- {{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()")}}