diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-15 07:00:50 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-15 07:00:50 +0100 |
commit | df8056fc0652ecafffac996081b73435acfab849 (patch) | |
tree | ba22b4208fcbe6ca7765a1970d9b377d64b2af08 /files/fr/web/css/background-origin | |
parent | 464e20b22c72324bdaebc232aebefbaca9184a19 (diff) | |
download | translated-content-df8056fc0652ecafffac996081b73435acfab849.tar.gz translated-content-df8056fc0652ecafffac996081b73435acfab849.tar.bz2 translated-content-df8056fc0652ecafffac996081b73435acfab849.zip |
Remove mozillademo links from CSS (#3642)
* Work - part 1 / N
* background-attachment
* background-blend-mode
* background-image
* background-origin
* Background position
* background-repeat
* background-size
* border-image
* border-image-outset
* border-image-repeat
* border-image-slice
* border-image-width
* clip-path
* content
* cross-fade()
* border-radius-generator
* multiple bckgrnd
* vertical-align
* url
* text-combine-upright
* position_value
* image-rendering
* using css gradients
* font-stretch
* font-stretch - add bcd key
* font-variant-numeric
* font-weight
* image-orientation
* list-style-image
* mask-border
* mask-clip
* mask-composite
* mask-image
* mask-mode
* mask-origin
* mask-position
* mask-size
* object-fit
* object-position
* position
* Various fixes and improvements
* Remove unecessary files
* Remove unecessary files (part 2)
* Missed level 1 fixes
Co-authored-by: cw118 <carolyn94118@gmail.com>
Diffstat (limited to 'files/fr/web/css/background-origin')
-rw-r--r-- | files/fr/web/css/background-origin/index.md | 93 |
1 files changed, 61 insertions, 32 deletions
diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md index e9a1286b35..379bea080b 100644 --- a/files/fr/web/css/background-origin/index.md +++ b/files/fr/web/css/background-origin/index.md @@ -1,21 +1,18 @@ --- title: background-origin slug: Web/CSS/background-origin -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-image translation_of: Web/CSS/background-origin --- {{CSSRef}} -La propriété **`background-origin`** détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (_padding_). +La propriété **`background-origin`** détermine l'origine de l'arrière-plan [`background-image`](/fr/docs/Web/CSS/background-image) à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<i lang="en">padding</i>). {{EmbedInteractiveExample("pages/css/background-origin.html")}} -Attention, `background-origin` est ignorée lorsque {{cssxref("background-attachment")}} vaut `fixed`. +Attention, `background-origin` est ignorée lorsque [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`. -> **Note :** Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`. +> **Note :** Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`. ## Syntaxe @@ -28,6 +25,7 @@ background-origin: content-box; /* Valeurs globales */ background-origin: inherit; background-origin: initial; +background-origin: revert; background-origin: unset; ``` @@ -36,57 +34,88 @@ background-origin: unset; - `border-box` - : L'arrière-plan est positionné relativement à la boîte de bordure. - `padding-box` - - : L'arrière-plan est positionné relativement à la boîte de remplissage (_padding_). + - : L'arrière-plan est positionné relativement à la boîte de remplissage (<i lang="en">padding</i>). - `content-box` - : L'arrière-plan est positionné relativement à la boîte de contenu. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Définir différentes origines ```css -div { - width: 200px; - height: 100px; +.example { + border: 10px double; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + background-origin: content-box; +} +``` + +```css +#example2 { + border: 4px solid black; + padding: 10px; + background: url('image.gif'); + background-repeat: no-repeat; + background-origin: border-box; } +``` -.exemple { - border: 10px double; - padding: 10px; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-color: palegreen; - background-position: 0px 40px; - background-origin: content-box; - background-repeat: no-repeat; +```css +div { + background-image: url('logo.jpg'), url('mainback.png'); /* Applique deux images en arrière-plan */ + background-position: top right, 0px 0px; + background-origin: content-box, padding-box; } ``` -### HTML +### Utiliser deux dégradés + +Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le premier dégradé utilise `padding-box` pour `background-origin` et l'arrière-plan s'inscrit donc à l'intérieur de la bordure. Le second dégradé utilise `content-box` et apparaît donc uniquement derrière le contenu. + +#### HTML ```html -<div class="exemple"></div> +<div class="box">Coucou !</div> +``` + +#### CSS + +```css +.box { + margin: 10px 0; + color: #fff; + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%), + radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%); + border: 20px dashed black; + padding: 20px; + width: 400px; + background-origin: padding-box, content-box; + background-repeat: no-repeat; +} ``` -### Résultat +#### Résultat -{{EmbedLiveSample("Exemples","300","200")}} +{{EmbedLiveSample("","300","200")}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-origin")}} +{{Compat}} ## Voir aussi -- {{cssxref("background-clip")}} +- [`background-clip`](/fr/docs/Web/CSS/background-clip) |