{"id":1213,"date":"2024-07-31T12:11:10","date_gmt":"2024-07-31T10:11:10","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1213"},"modified":"2024-07-31T12:11:10","modified_gmt":"2024-07-31T10:11:10","slug":"10-backgrounds-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/10-backgrounds-css\/","title":{"rendered":"10. Backgrounds CSS"},"content":{"rendered":"\n

Las propiedades de fondo de CSS<\/strong> se utilizan para agregar efectos de fondo a los elementos.<\/p>\n\n\n\n\n\n\n\n

background-color<\/h2>\n\n\n\n

La propiedad background-color<\/em><\/strong> especifica el color de fondo de un elemento.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

body {\n  background-color: lightblue;\n}<\/pre>\n\n\n\n
Con CSS<\/strong>, un color suele especificarse mediante:<\/p>\n\n\n\n
    \n
  • un nombre de color v\u00e1lido, como \u00abred\u00bb<\/li>\n\n\n\n
  • un valor HEX – como \u00ab#ff0000\u00bb<\/li>\n\n\n\n
  • un valor RGB – como \u00abrgb(255,0,0)\u00bb<\/li>\n<\/ul>\n\n\n\n
    Puedes establecer el color de fondo para cualquier elemento HTML:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    h1 {\n  background-color: green;\n}\n\ndiv {\n  background-color: lightblue;\n}\n\np {\n  background-color: yellow;\n}<\/pre>\n\n\n\n
    Opacidad \/ Transparencia<\/h2>\n\n\n\n
    La propiedad opacity<\/strong> <\/em>especifica la opacidad<\/strong>\/transparencia<\/strong> de un elemento. Puede tomar un valor de 0.0 – 1.0. Cuanto menor sea el valor, m\u00e1s transparente:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    div {\n  background-color: green;\n  opacity: 0.3;\n}<\/pre>\n\n\n\n
    \n
    Nota<\/strong>: cuando se usa la propiedad opacity<\/em> <\/strong>para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que el texto dentro de un elemento completamente transparente sea dif\u00edcil de leer.<\/p>\n<\/blockquote>\n\n\n\n
    Transparencia usando RGBA<\/h2>\n\n\n\n
    Si no deseas aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, usa valores de color RGBA<\/strong>. El siguiente ejemplo establece la opacidad<\/strong> para el color de fondo y no para el texto.<\/p>\n\n\n\n
    Un valor de color RGBA<\/strong> se especifica con: rgba(rojo, verde, azul, alfa). El par\u00e1metro alfa es un n\u00famero entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    div {\n  background: rgba(0, 128, 0, 0.3) \/* Green background with 30% opacity *\/\n}<\/pre>\n\n\n\n
    background-image<\/h2>\n\n\n\n
    La propiedad background-image<\/em><\/strong> especifica una imagen para usar como fondo de un elemento. De forma predeterminada, la imagen se repite para que cubra todo el elemento.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    body {\n  background-image: url(\"paper.gif\");\n}<\/pre>\n\n\n\n
    \n
    Nota<\/strong>: cuando utilices una imagen de fondo, utiliza una imagen que no interfiera con el texto<\/p>\n<\/blockquote>\n\n\n\n
    background-repeat<\/h2>\n\n\n\n
    Por defecto, la propiedad background-image<\/em><\/strong> repite una imagen tanto horizontal como verticalmente. Algunas im\u00e1genes deben repetirse solo horizontal o verticalmente, o se ver\u00e1n extra\u00f1as. Para repetir la imagen horizontalmente se utiliza la siguiente sintaxis.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    body {\nbackground-image: url(\"gradient_bg.png\");\nbackground-repeat<\/strong>: repeat-x<\/strong>;\n}<\/pre>\n\n\n\n
    Para repetir la imagen verticalmente se utiliza la siguiente sintaxis.\n\nEjm<\/strong>\n\nbody {\n  background-image: url(\"gradient_bg.png\");\n  background-repeat<\/strong>: repeat-y<\/strong>;\n}<\/pre>\n\n\n\n
    Para mostrar el fondo de imagen tan s\u00f3lo una vez se utiliza la siguiente sintaxis.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    body {\n  background-image: url(\"img_tree.png\");\n  background-repeat<\/strong>: no-repeat<\/strong>;\n}<\/pre>\n\n\n\n
    background-position<\/h2>\n\n\n\n
    La propiedad background-position<\/em><\/strong> se utiliza para especificar la posici\u00f3n de la imagen de fondo.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    body {\n  background-image: url(\"img_tree.png\");\n  background-repeat: no-repeat;\n  background-position: right top;\n<\/strong>}<\/pre>\n\n\n\n
    Valores de la propiedad background-position<\/h3>\n\n\n\n
    Valor<\/th>Descripci\u00f3n<\/th><\/tr>
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom<\/td>    		Si solo especifica una palabra clave, el otro valor ser\u00e1 \u00abcenter\u00bb<\/td><\/tr>
    x% y%<\/em><\/td>El primer valor es la posici\u00f3n horizontal y el segundo valor es la vertical. La esquina superior izquierda es 0% 0%. La esquina inferior derecha es 100% 100%. Si solo especifica un valor, el otro valor ser\u00e1 50%. El valor predeterminado es: 0% 0%<\/td><\/tr>
    xpos ypos<\/em><\/td>El primer valor es la posici\u00f3n horizontal y el segundo valor es la vertical. La esquina superior izquierda es 0 0. Las unidades pueden ser p\u00edxeles (0px 0px) o cualquier otra unidad CSS. Si solo especifica un valor, el otro valor ser\u00e1 50%. Puedes mezclar % y positions<\/td><\/tr>
    initial<\/td>Establece esta propiedad en su valor predeterminado.<\/td><\/tr>
    inherit<\/td>Hereda esta propiedad de su elemento principal.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1213","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1213"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1213\/revisions"}],"predecessor-version":[{"id":1214,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1213\/revisions\/1214"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}