• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Web Technology

      Web technology reference for developers

  • Guides
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. Technologies web pour développeurs
  2. CSS : Feuilles de style en cascade
  3. Compositing and Blending
    • English (US)
    • 日本語
    • 한국어

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

Dans cet article

  • Référence
  • Spécifications
  • Compatibilité des navigateurs
  1. CSS
  2. Tutorials
  3. CSS basics
  4. Premiers pas en CSS
    1. Aperçu des premiers pas en CSS
    2. Qu'est-ce que CSS ?
    3. Démarrer avec CSS
    4. Comment CSS est structuré
    5. Comment CSS fonctionne
    6. Assessment: Styling a biography page
  5. Les briques composant CSS
    1. Aperçu des briques composant CSS
    2. Sélecteurs CSS
    3. Type, class, and ID selectors
    4. Attribute selectors
    5. Pseudo-classes and pseudo-elements
    6. Combinators
    7. Cascade et héritage
    8. Cascade layers
    9. Le modèle de boîte
    10. Arrière-plans et bordures
    11. Gérer les différentes directions du texte
    12. Dépassement du contenu
    13. CSS values and units
    14. Dimensionner des objets en CSS
    15. Images, média, et éléments de formulaire
    16. Mettre en forme les tableaux
    17. Déboguer du CSS
    18. Organiser votre CSS
    19. Assessment: Fundamental CSS comprehension
    20. Assessment: Creating fancy letterheaded paper
    21. Assessment: A cool-looking box
  6. Mettre en forme du texte
    1. Aperçu de la mise en forme du texte
    2. Notions fondamentales pour la mise en forme du texte et des polices
    3. Mettre en forme les listes
    4. Mettre en forme les liens
    5. Polices web
    6. Assessment: Typesetting a community school homepage
  7. Dispositions CSS
    1. Aperçu des dispositions CSS
    2. Introduction to CSS layout
    3. Flux normal
    4. Boîtes flexibles
    5. Grilles
    6. Flottements
    7. Positionnement
    8. Multiple-column layout
    9. Conception adaptative
    10. Beginner's guide to media queries
    11. Legacy layout methods
    12. Supporting older browsers
    13. Assessment: Fundamental layout comprehension
  8. Référence
  9. Modules
    1. CSS anchor positioning
    2. Les animations CSS
    3. Arrière-plans et bordures CSS (CSS backgrounds and borders)
    4. CSS Basic User Interface
    5. CSS Box Alignment
    6. Modèle de boîte
    7. CSS box sizing
    8. CSS cascade and inheritance
    9. CSS Custom Properties for Cascading Variables
    10. CSS color adjustment
    11. CSS Color
    12. Compositing and Blending
    13. CSS Conditional Rules
    14. Compartimentation CSS (CSS Containment)
    15. CSS Counter Styles
    16. CSS Display
    17. Filter Effects
    18. Disposition des boîtes flexibles CSS
    19. CSS font loading
    20. CSS Fonts
    21. CSS Fragmentation
    22. CSS Generated Content
    23. Grilles CSS (CSS Grid)
    24. CSS Images
    25. CSS Lists
    26. CSS Logical Properties
    27. CSS Masks
    28. Requêtes média CSS (media queries)
    29. Motion Path
    30. Colonnes CSS
    31. CSS Namespaces
    32. CSS nesting
    33. CSS Overflow
    34. CSS overscroll behavior
    35. CSS Pages
    36. CSS Positioned Layout
    37. CSS properties and values API
    38. CSS pseudo-elements
    39. CSS Ruby
    40. CSS scoping
    41. CSS scroll-driven animations
    42. CSS Scroll Snap
    43. CSS Scrollbars
    44. Sélecteurs CSS
    45. CSS shadow parts
    46. CSS Shapes
    47. Jeux de caractères CSS
    48. CSS Table
    49. CSS Text
    50. CSS Text Decoration
    51. CSS Transforms
    52. Transitions CSS
    53. CSS view transitions
    54. CSS Writing Modes
    55. CSSOM View
  10. Properties
    1. -moz-*
      1. -moz-float-edge Non-standard Obsolète
      2. -moz-force-broken-image-icon Non-standard Obsolète
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Obsolète
      6. -moz-user-input Non-standard Obsolète
    2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-tap-highlight-color Non-standard
      11. -webkit-text-fill-color
      12. -webkit-text-security Non-standard
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout Non-standard
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
    5. all
    6. anchor-name Expérimental
    7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Expérimental
      11. animation-range-end Expérimental
      12. animation-range-start Expérimental
      13. animation-timeline Expérimental
      14. animation-timing-function
    8. appearance (-moz-appearance, -webkit-appearance)
    9. aspect-ratio
    10. backdrop-filter
    11. backface-visibility
    12. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    13. block-size
    14. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    15. bottom
    16. box-*
      1. box-align Non-standard Obsolète
      2. box-decoration-break
      3. box-direction Non-standard Obsolète
      4. box-flex Non-standard Obsolète
      5. box-flex-group Non-standard Obsolète
      6. box-lines Non-standard Obsolète
      7. box-ordinal-group Non-standard Obsolète
      8. box-orient Non-standard Obsolète
      9. box-pack Non-standard Obsolète
      10. box-shadow
      11. box-sizing
    17. break-*
      1. break-after
      2. break-before
      3. break-inside
    18. caption-side
    19. caret-color
    20. clear
    21. clip-*
      1. clip Obsolète
      2. clip-path
      3. clip-rule
    22. color-*
      1. color
      2. color-interpolation
      3. color-interpolation-filters
      4. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap (grid-column-gap)
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. cx
    32. cy
    33. d
    34. direction
    35. display
    36. dominant-baseline
    37. empty-cells
    38. field-sizing Expérimental
    39. fill-*
      1. fill
      2. fill-opacity
      3. fill-rule
    40. filter
    41. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    42. float
    43. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth Non-standard
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-position
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    44. forced-color-adjust
    45. gap (grid-gap)
    46. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    47. hanging-punctuation
    48. height
    49. hyphenate-character
    50. hyphenate-limit-chars
    51. hyphens
    52. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution Expérimental
    53. initial-letter
    54. inline-size
    55. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    56. interpolate-size Expérimental
    57. isolation
    58. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    59. left
    60. letter-spacing
    61. line-*
      1. line-break
      2. line-height
      3. line-height-step Expérimental
    62. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    63. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim Expérimental
    64. marker-*
      1. marker
      2. marker-end
      3. marker-mid
      4. marker-start
    65. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    66. math-*
      1. math-depth
      2. math-shift Expérimental
      3. math-style
    67. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    68. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    69. mix-blend-mode
    70. object-fit
    71. object-position
    72. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    73. opacity
    74. order
    75. orphans
    76. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    77. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    78. overlay Expérimental
    79. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    80. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    81. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    82. paint-order
    83. perspective
    84. perspective-origin
    85. place-*
      1. place-content
      2. place-items
      3. place-self
    86. pointer-events
    87. position-*
      1. position
      2. position-anchor Expérimental
      3. position-area
      4. position-try Expérimental
      5. position-try-fallbacks Expérimental
      6. position-try-order Expérimental
      7. position-visibility Expérimental
    88. print-color-adjust
    89. quotes
    90. r
    91. resize
    92. right
    93. rotate
    94. row-gap (grid-row-gap)
    95. ruby-align
    96. ruby-position
    97. rx
    98. ry
    99. scale
    100. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. @scroll-timeline Expérimental
      28. scroll-timeline-axis Expérimental
      29. scroll-timeline-name Expérimental
    101. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    102. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    103. stop-color
    104. stop-opacity
    105. stroke-*
      1. stroke
      2. stroke-dasharray
      3. stroke-dashoffset
      4. stroke-linecap
      5. stroke-linejoin
      6. stroke-miterlimit
      7. stroke-opacity
      8. stroke-width
    106. tab-size
    107. table-layout
    108. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-combine-upright
      5. text-decoration
      6. text-decoration-color
      7. text-decoration-line
      8. text-decoration-skip Expérimental
      9. text-decoration-skip-ink
      10. text-decoration-style
      11. text-decoration-thickness
      12. text-emphasis
      13. text-emphasis-color
      14. text-emphasis-position
      15. text-emphasis-style
      16. text-indent
      17. text-justify
      18. text-orientation
      19. text-overflow
      20. text-rendering
      21. text-shadow
      22. text-size-adjust Expérimental
      23. text-spacing-trim Expérimental
      24. text-transform
      25. text-underline-offset
      26. text-underline-position
      27. text-wrap
      28. text-wrap-mode
      29. text-wrap-style
    109. timeline-scope Expérimental
    110. top
    111. touch-action
    112. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    113. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    114. translate
    115. unicode-bidi
    116. user-modify Non-standard Obsolète
    117. user-select
    118. vector-effect
    119. vertical-align
    120. view-*
      1. view-timeline Expérimental
      2. view-timeline-axis Expérimental
      3. view-timeline-inset Expérimental
      4. view-timeline-name Expérimental
      5. view-transition-name
    121. visibility
    122. white-space
    123. white-space-collapse
    124. widows
    125. width
    126. will-change
    127. word-break
    128. word-spacing
    129. writing-mode
    130. x
    131. y
    132. z-index
    133. zoom
  11. Selectors
    1. Sélecteurs d'attribut
    2. Sélecteurs de classe
    3. Sélecteurs d'ID
    4. & nesting selector
    5. Sélecteurs de type
    6. Sélecteurs universels
  12. Combinators
    1. Sélecteurs enfant
    2. Combinateur de colonne Expérimental
    3. Sélecteurs descendant
    4. Namespace separator
    5. Combinateur de voisins directs
    6. Liste de sélecteurs
    7. Combinateur de voisins suivants
  13. Pseudo-classes
    1. :-moz-broken Non-standard Obsolète
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Expérimental Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Expérimental Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :-webkit-autofill
    19. :blank Expérimental
    20. :buffering
    21. :checked
    22. :current
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link
    52. :modal
    53. :muted
    54. :not
    55. :nth-child
    56. :nth-last-child
    57. :nth-last-of-type
    58. :nth-of-type
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state()
    78. :target
    79. :target-within Expérimental
    80. :-moz-ui-invalid
    81. :user-valid (:-moz-ui-valid)
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
  14. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Expérimental Non-standard
    3. ::-moz-list-bullet Expérimental Non-standard
    4. ::-moz-list-number Expérimental Non-standard
    5. ::-moz-meter-bar Non-standard
    6. ::-moz-progress-bar Expérimental Non-standard
    7. ::-moz-range-progress Non-standard
    8. ::-moz-range-thumb Non-standard
    9. ::-moz-range-track Non-standard
    10. ::-webkit-inner-spin-button Non-standard
    11. ::-webkit-meter-bar Non-standard Obsolète
    12. ::-webkit-meter-even-less-good-value Non-standard
    13. ::-webkit-meter-inner-element Non-standard
    14. ::-webkit-meter-optimum-value Non-standard
    15. ::-webkit-meter-suboptimum-value Non-standard
    16. ::-webkit-progress-bar Non-standard
    17. ::-webkit-progress-inner-element Non-standard
    18. ::-webkit-progress-value Non-standard
    19. ::-webkit-scrollbar Non-standard
    20. ::-webkit-search-cancel-button Non-standard
    21. ::-webkit-search-results-button Non-standard
    22. ::-webkit-slider-runnable-track Expérimental
    23. ::-webkit-slider-thumb Expérimental
    24. ::after
    25. ::backdrop
    26. ::before (:before)
    27. ::cue
    28. ::-webkit-file-upload-button
    29. ::first-letter
    30. ::first-line (:first-line)
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
  15. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Obsolète
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Expérimental
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition Expérimental
  16. Functions
    1. -moz-image-rect Non-standard Obsolète
    2. abs()
    3. acos()
    4. anchor-size() Expérimental
    5. anchor() Expérimental
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. blur()
    11. brightness()
    12. calc-size() Expérimental
    13. calc
    14. circle()
    15. clamp()
    16. color-contrast() Expérimental
    17. color-mix()
    18. color()
    19. conic-gradient()
    20. contrast()
    21. cos()
    22. counter()
    23. counters()
    24. cross-fade()
    25. device-cmyk()
    26. drop-shadow()
    27. element Expérimental
    28. ellipse()
    29. env()
    30. exp()
    31. fit-content()
    32. grayscale()
    33. hsl()
    34. hue-rotate()
    35. hwb()
    36. hypot()
    37. image-set()
    38. image()
    39. inset()
    40. invert()
    41. lab()
    42. layer()
    43. lch()
    44. light-dark()
    45. linear-gradient()
    46. log()
    47. matrix()
    48. matrix3d()
    49. max()
    50. min()
    51. minmax()
    52. mod()
    53. oklab()
    54. oklch()
    55. opacity()
    56. paint()
    57. palette-mix() Expérimental
    58. path()
    59. perspective()
    60. polygon()
    61. pow()
    62. radial-gradient()
    63. ray()
    64. rect()
    65. rem()
    66. repeat()
    67. repeating-conic-gradient()
    68. repeating-linear-gradient()
    69. repeating-radial-gradient()
    70. rgb()
    71. rotate()
    72. rotate3d()
    73. rotateX()
    74. rotateY()
    75. rotateZ()
    76. round()
    77. saturate()
    78. scale()
    79. scale3d()
    80. scaleX()
    81. scaleY()
    82. scaleZ()
    83. scroll() Expérimental
    84. sepia()
    85. shape() Expérimental
    86. sign()
    87. sin()
    88. skew()
    89. skewX()
    90. skewY()
    91. sqrt()
    92. symbols()
    93. tan()
    94. translate()
    95. translate3d()
    96. translateX()
    97. translateY()
    98. translateZ()
    99. url()
    100. var()
    101. view() Expérimental
    102. xywh()
  17. Types
    1. <absolute-size>
    2. alpha-value
    3. <angle>
    4. <angle-percentage>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. display-inside
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. display-outside
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency>
    25. <frequency-percentage>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue>
    30. <hue-interpolation-method>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length>
    35. <length-percentage>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area>
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Obsolète
    47. <string>
    48. <system-color>
    49. <time>
    50. <time-percentage>
    51. transform-function
    52. url()
  18. Guides
  19. Animations
    1. Utiliser les animations CSS
  20. Arrière-plans et bordures
    1. Utiliser plusieurs arrière-plans
    2. Redimensionner les images d'arrière-plan
  21. Alignement des boîtes
    1. Alignement des boîtes avec la disposition en bloc
    2. Alignement des boîtes avec les boîtes flexibles
    3. Alignement des boîtes dans une disposition en grille
    4. Alignement des boîtes avec la disposition en colonnes
  22. Modèle de boîte
    1. Introduction aux bases du modèle de boîte CSS
    2. Maîtriser la fusion des marges
  23. Colors
    1. Applying color to HTML elements
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility: Understanding colors and luminance
    6. Accessibility: Color contrast
  24. Colonnes
    1. Concepts de base de la disposition en colonnes
    2. Mettre en forme les colonnes
    3. Étendre et équilibrer
    4. Gérer le dépassement avec les colonnes
    5. Ruptures du contenu avec les colonnes
  25. Règles conditionnelles
    1. Utiliser les requêtes de fonctionnalité
  26. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
  27. Vue CSSOM
    1. Systèmes de coordonnées
  28. Boîtes flexibles
    1. Concepts de base pour les boîtes flexibles
    2. Comparaison avec les autres méthodes de disposition
    3. Aligner des objets dans un conteneur flexible
    4. Ordonner des objets flexibles
    5. Contrôler les proportions des objets flexibles
    6. Maîtriser le retour à la ligne des objets flexibles
    7. Cas d'usage caractéristiques des boîtes flexibles
  29. Disposition de flux
    1. Disposition de bloc et en ligne avec le flux normal
    2. Dans le flux et en dehors
    3. Explication des contextes de formatage
    4. Disposition de flux et modes d'écriture
    5. Disposition de flux et dépassement
  30. Polices
    1. Guide des fonctionnalités des polices OpenType
    2. Guide des polices variables
  31. Grille
    1. Concepts de base de la disposition en grille
    2. Relations avec les autres méthodes de disposition
    3. Placement basé sur les lignes
    4. Gabarits de zones de grille
    5. Disposition en utilisant les lignes de grille nommées
    6. Placement automatique dans une disposition en grille
    7. Alignement des boîtes dans une disposition en grille
    8. Grilles, valeurs logiques et modes d'écriture
    9. Disposition en grille et accessibilité
    10. Disposition en grille et amélioration progressive
    11. Réaliser des dispositions usuelles avec les grilles
    12. Sous-grilles
    13. Disposition en briques
  32. Images
    1. Utiliser les dégradés CSS
  33. Listes et compteurs
    1. Utiliser les compteurs CSS
    2. Indentation cohérente des listes
  34. Propriétés logiques
    1. Concepts de base
    2. Flottement et positionnement
    3. Marges, bordures et remplissage
    4. Dimensionnement
  35. Math functions
    1. Using CSS math functions
  36. Requêtes média
    1. Utiliser les requêtes média
    2. Utiliser les requêtes média pour l'accessibilité
    3. Tester les requêtes média de façon programmatique
    4. Printing
  37. Nesting style rules
    1. Using CSS nesting
    2. Nesting at-rules
    3. Nesting and specificity
  38. Positionnement
    1. Comprendre le z-index CSS
  39. Ancrage du défilement
    1. Concepts de base pour l'ancrage du défilement
  40. Formes
    1. Aperçu des formes
    2. Formes à partir des valeurs de boîtes
    3. Formes basiques
    4. Formes à partir d'images
  41. Texte
    1. Retour à la ligne et rupture du texte
  42. Transformations
    1. Utiliser les transformations
  43. Transitions
    1. Utiliser les transitions
  44. Livre de recettes pour la disposition
    1. Objets média
    2. Colonnes
    3. Centrer un élément
    4. Pieds de page ancrés
    5. Navigation séparée
    6. Navigation avec un fil d'Ariane
    7. Listes de groupe avec des badges
    8. Pagination
    9. Carte
    10. Conteneur de grille
  46. Outils
    1. Sélecteur de couleurs
    2. Générateur d'ombre de boîte
    3. Générateur d'image de bordure
    4. Générateur de border-radius

Dans cet article

  • Référence
  • Spécifications
  • Compatibilité des navigateurs

Compositing and Blending

Compositing and Blending (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.

Référence

Propriétés

  • background-blend-mode
  • isolation
  • mix-blend-mode

Types de donnée

  • <blend-mode>

Spécifications

Specification
Compositing and Blending Level 2
Compositing and Blending Level 1

Compatibilité des navigateurs

{{Compat}}

Help improve MDN

Learn how to contribute.

This page was last modified on 3 août 2023 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
Mozilla logo
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a Creative Commons license.