diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/background-image | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/web/css/background-image')
-rw-r--r-- | files/es/web/css/background-image/index.html | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/files/es/web/css/background-image/index.html b/files/es/web/css/background-image/index.html new file mode 100644 index 0000000000..b2ab46dd70 --- /dev/null +++ b/files/es/web/css/background-image/index.html @@ -0,0 +1,135 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-image +--- +<p>{{ PreviousNext("CSS:background-color", "CSS:background-position") }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> establece una o más imágenes de fondo para un elemento.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: ninguno</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Cssxref("visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: URI absoluta o ninguna</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="eval">background-image: <em>url</em> | none | inherit +</pre> + +<h2 id="Valores" name="Valores">Valores</h2> + +<dl> + <dt>url </dt> + <dd>Localización de la imagen que se utilizará de fondo.</dd> + <dt>none </dt> + <dd>Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Note that the star image is partially transparent and is layered over the cat image.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">pre, p { + font-size: 1.5em; + color: #FE7F88; + background-color: transparent; +} + +div { + background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +p { + background-image: none; +} + +.catsandstars { + background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Ejemplos')}}</p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.</p> + +<h2 id="Especificaciones" name="Especificaciones">Sobre Accesibilidad</h2> + +<p>Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta <code>img</code>.</p> + +<p>Para más información (en inglés):</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li> +</ul> + +<h2 id="Compatibilidad_de_navegador" name="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> |