{"id":2221,"date":"2012-03-15T21:46:43","date_gmt":"2012-03-15T21:46:43","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2221"},"modified":"2019-07-10T10:26:23","modified_gmt":"2019-07-10T10:26:23","slug":"transparencia-de-imagenes-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/","title":{"rendered":"Transparencia de im\u00e1genes con CSS"},"content":{"rendered":"<p>Crear o a\u00f1adir transparencia a las im\u00e1genes con <strong>CSS<\/strong> es muy simple.<\/p>\n<p>A partir de <strong>CSS3<\/strong> disponemos de una propiedad \u00abopacity\u00bb que podemos utilizar para aclarecer y dar el efecto de transparencia a las im\u00e1genes de un sitio Web.<\/p>\n<p>Veamos un ejemplo de lo que estamos hablando:<\/p>\n<p>Imagen en estado normal:<\/p>\n<p>La misma imagen con transparencia:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/klematis2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2283\" title=\"klematis2\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/klematis2.png\" alt=\"\" width=\"154\" height=\"117\" \/><\/a>Este efecto lo conseguimos de la siguiente forma:<\/p>\n<pre>img {\r\n opacity:0.4;\r\n filter:alpha(opacity=40); \/* For IE8 and earlier *\/\r\n}<\/pre>\n<p>Ejemplo 1: Podr\u00edamos hacer que con el efecto hover mostremos transparencia de la imagen o no de la siguiente forma:<\/p>\n<pre>img {\r\n opacity:0.4;\r\n filter:alpha(opacity=40); \/* For IE8 and earlier *\/\r\n}\r\n\r\nimg:hover {\r\n opacity:1.0;\r\n filter:alpha(opacity=100); \/* For IE8 and earlier *\/\r\n}<\/pre>\n<p>En el caso anterior, hemos a\u00f1adido lo que debe suceder cuando un usuario se sit\u00faa sobre una de las im\u00e1genes. En este caso queremos que la imagen no sea transparente cuando el usuario pasa sobre ella.<\/p>\n<p>El c\u00f3digo <strong>CSS<\/strong> para esto es: la opacidad = 1.<\/p>\n<p>IE8 y versiones anteriores: filter: alpha (opacity = 100).<\/p>\n<p>Cuando el puntero del rat\u00f3n se aleja de la imagen, la imagen ser\u00e1 transparente de nuevo.<\/p>\n<p>Ejemplo 2: Texto dentro de un contenedor con transparencia.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/opacity\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2286\" title=\"textbox\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/textbox.png\" alt=\"\" width=\"510\" height=\"260\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/textbox.png 510w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/textbox-300x152.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/>Ver ejemplos en funcionamiento<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[110,127],"class_list":["post-2221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-imagenes","tag-transparencia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Transparencia de im\u00e1genes con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transparencia de im\u00e1genes con CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-15T21:46:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-10T10:26:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/\",\"name\":\"Transparencia de im\u00e1genes con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2012-03-15T21:46:43+00:00\",\"dateModified\":\"2019-07-10T10:26:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transparencia de im\u00e1genes con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Transparencia de im\u00e1genes con CSS - Jose Aguilar Blog","description":"Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Transparencia de im\u00e1genes con CSS - Jose Aguilar Blog","og_description":"Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-15T21:46:43+00:00","article_modified_time":"2019-07-10T10:26:23+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/","name":"Transparencia de im\u00e1genes con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2012-03-15T21:46:43+00:00","dateModified":"2019-07-10T10:26:23+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Agrega el efecto de opacidad o transparencia a las im\u00e1genes de tu sitio Web r\u00e1pida y f\u00e1cilmente con CSS.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/transparencia-de-imagenes-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Transparencia de im\u00e1genes con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2221"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2221\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}