CSS background-blend-mode
❮
上一页
accent-color
align-content
align-items
align-self
animation
aspect-ratio
backdrop-filter
background
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-end-end-radius
border-end-start-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
border-inline-color
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-reflect
box-shadow
box-sizing
caption-side
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-wrap
float
font
font-family
font-feature-settings
font-kerning
font-size
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
height
hyphens
image-rendering
inline-size
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
justify-content
justify-items
justify-self
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-block
margin-block-end
margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
max-block-size
max-inline-size
min-block-size
min-inline-size
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
paint-order
perspective
perspective-origin
place-content
place-items
place-self
quotes
right
rotate
row-gap
scale
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-emphasis
text-indent
text-orientation
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
translate
unicode-bidi
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
下一页
❯
示例中展现不同的background-blend-mode属性值.
选择不同的值查看对应结果:
background-blend-mode
:
normal
;
background-blend-mode
:
multiply
;
background-blend-mode
:
screen
;
background-blend-mode
:
overlay
;
background-blend-mode
:
darken
;
background-blend-mode
:
lighten
;
background-blend-mode
:
color-dodge
;
background-blend-mode
:
saturation
;
background-blend-mode
:
color
;
background-blend-mode
:
luminosity
;
要使用更多方法，请在编辑器中试一下:
亲自试一试 ❯