CSS 参考手册
CSS 参考手册
  1. CSS 参考手册
  2. CSS 选择器
  3. CSS 语音参考
  4. CSS Web安全字体
  5. CSS 动画
  6. CSS 单位
  7. CSS 颜色
  8. CSS 合法颜色值
  9. CSS 颜色名称
  10. CSS 颜色十六进制值
  11. CSS 浏览器支持
  12. CSS属性
    1. align-content 属性
    2. align-items 属性
    3. align-self 属性
    4. all 属性
    5. animation 属性
    6. animation-delay 属性
    7. animation-direction 属性
    8. animation-duration 属性
    9. animation-fill-mode 属性
    10. animation-iteration-count 属性
    11. animation-name 属性
    12. animation-play-state 属性
    13. animation-timing-function 属性
    14. appearance 属性
    15. backface-visibility 属性
    16. background 属性
    17. background-attachment 属性
    18. background-blend-mode 属性
    19. background-clip 属性
    20. background-color 属性
    21. background-image 属性
    22. background-origin 属性
    23. background-position 属性
    24. background-repeat 属性
    25. background-size 属性
    26. border 属性
    27. border-bottom 属性
    28. border-bottom-color 属性
    29. border-bottom-left-radius 属性
    30. border-bottom-right-radius 属性
    31. border-bottom-style 属性
    32. border-bottom-width 属性
    33. border-collapse 属性
    34. border-color 属性
    35. border-image 属性
    36. border-image-outset 属性
    37. border-image-repeat 属性
    38. border-image-source 属性
    39. border-image-width 属性
    40. Border-left 属性
    41. border-left-color 属性
    42. border-left-style 属性
    43. border-left-width 属性
    44. border-image-slice 属性
    45. border-radius 属性
    46. border-right 属性
    47. border-right-color 属性
    48. border-right-style 属性
    49. border-right-width 属性
    50. border-spacing 属性
    51. border-style 属性
    52. border-top 属性
    53. border-top-color 属性
    54. border-top-left-radius 属性
    55. border-top-right-radius 属性
    56. border-top-style 属性
    57. border-top-width 属性
    58. border-width 属性
    59. bottom 属性
    60. box-align 属性
    61. box-direction 属性
    62. box-flex 属性
    63. box-flex-group 属性
    64. box-lines 属性
    65. box-ordinal-group 属性
    66. box-orient 属性
    67. box-pack 属性
    68. box-shadow 属性
    69. box-sizing 属性
    70. caption-side 属性
    71. clear 属性
    72. clip 属性
    73. color 属性
    74. column-count 属性
    75. column-fill 属性
    76. column-gap 属性
    77. column-rule 属性
    78. column-rule-color 属性
    79. column-rule-style 属性
    80. column-rule-width 属性
    81. column-span 属性
    82. column-width 属性
    83. columns 属性
    84. content 属性
    85. counter-increment 属性
    86. counter-reset 属性
    87. cursor 属性
    88. direction 属性
    89. display 属性
    90. Empty-cells 属性
    91. filter(滤镜) 属性
    92. flex 属性
    93. flex-basis 属性
    94. flex-direction 属性
    95. flex-flow 属性
    96. flex-grow 属性
    97. flex-shrink 属性
    98. flex-wrap 属性
    99. float 属性
    100. font 属性
    101. @font-face 规则
    102. font-family 属性
    103. font-size 属性
    104. font-size-adjust 属性
    105. font-stretch 属性
    106. font-style 属性
    107. font-variant 属性
    108. font-weight 属性
    109. grid-columns 属性
    110. grid-rows 属性
    111. hanging-punctuation 属性
    112. height 属性
    113. icon 属性
    114. justify-content 属性
    115. @keyframes 规则
    116. left 属性
    117. letter-spacing 属性
    118. line-height 属性
    119. list-style 属性
    120. list-style-image 属性
    121. list-style-position 属性
    122. list-style-type 属性
    123. margin 属性
    124. margin-bottom 属性
    125. margin-left 属性
    126. margin-right 属性
    127. margin-top 属性
    128. max-height 属性
    129. max-width 属性
    130. @media查询
    131. min-height 属性
    132. min-width 属性
    133. nav-down 属性
    134. nav-index 属性
    135. nav-left 属性
    136. nav-right 属性
    137. nav-up 属性
    138. opacity 属性
    139. order 属性
    140. outline 属性
    141. outline-color 属性
    142. outline-offset 属性
    143. outline-style 属性
    144. Outline-width 属性
    145. overflow 属性
    146. overflow-x 属性
    147. overflow-y 属性
    148. padding 属性
    149. Padding-bottom 属性
    150. padding-left 属性
    151. padding-right 属性
    152. padding-top 属性
    153. Page-break-after 属性
    154. page-break-before 属性
    155. page-break-inside 属性
    156. perspective 属性
    157. perspective-origin 属性
    158. position 属性
    159. punctuation-trim 属性
    160. quotes 属性
    161. resize 属性
    162. right 属性
    163. rotation 属性
    164. tab-size 属性
    165. table-layout 属性
    166. target 属性
    167. target-name 属性
    168. target-new 属性
    169. target-position 属性
    170. text-align 属性
    171. text-align-last 属性
    172. text-decoration 属性
    173. text-decoration-color 属性
    174. text-decoration-line 属性
    175. text-decoration-style 属性
    176. text-indent 属性
    177. text-justify 属性
    178. text-outline 属性
    179. text-overflow 属性
    180. text-shadow 属性
    181. text-transform 属性
    182. text-wrap 属性
    183. top 属性
    184. transform 属性
    185. transform-origin 属性
    186. transform-style 属性
    187. transition 属性
    188. transition-delay 属性
    189. transition-duration 属性
    190. transition-property 属性
    191. transition-timing-function 属性
    192. unicode-bidi 属性
    193. vertical-align 属性
    194. visibility 属性
    195. width 属性
    196. white-space 属性
    197. border-image-width 属性
    198. word-break 属性
    199. word-spacing 属性
    200. word-wrap 属性
    201. z-index 属性
阅读(31.2k) 书签 赞(1) 我要纠错

CSS background-blend-mode 属性

2022-06-02 14:30 更新

CSS background-blend-mode 属性

实例

混合模式:

div {
    width: 290px;
    height: 69px;
    background-size: 290px 69px;
    background-repeat:no-repeat;
    background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
    background-blend-mode: color-dodge;
}

尝试一下 »

定义和用法

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

默认值: normal
Inherited: no
Animatable: no. 查看 animatable
版本: CSS3
JavaScript 语法: object.style.backgroundBlendMode="screen"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
background-blend-mode 35.0 不支持 30.0 7.1 22.0

CSS 语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值

值 描述 实例
normal 默认值。设置正常的混合模式。 尝试一下 »
multiply 正片叠底模式。 尝试一下 »
screen 滤色模式。 尝试一下 »
overlay 叠加模式。 尝试一下 »
darken 变暗模式。 尝试一下 »
lighten 变亮模式。 尝试一下 »
color-dodge 颜色减淡模式。 尝试一下 »
saturation 饱和度模式。 尝试一下 »
color 颜色模式。 尝试一下 »
luminosity 亮度模式。 尝试一下 »

相关文章

CSS 教程: CSS 背景

以上内容是否对您有帮助：
← CSS background-attachment 属性
CSS3 background-clip 属性 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号