blob: e7e8a94c636043d357ecd2262fac69f5c66c9fcf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
---
title: background-origin
slug: Web/CSS/background-origin
tags:
- CSS
- CSS Referência
translation_of: Web/CSS/background-origin
---
<h2 id="Resumen">Resumen</h2>
<p>La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad <a href="/es/CSS/background-position" title="background-position">background-position</a> calcule la posición de inicio de un fondo o imagen definida por la propiedad <a href="/es/CSS/background-image" title="background-image">background-image</a>.</p>
<ul>
<li>Valor inicial: padding-box</li>
<li>Aplica a: Todos los elementos</li>
<li>Heredado: No</li>
<li>Porcentajes: n/a</li>
<li>Media: Visual</li>
<li>Valor computado: Mismo que valor especificado.</li>
<li>Animación: No</li>
</ul>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="eval">background-origin:[<code>padding-box | border-box | conten</code><code>t-box</code>][, [<code>border-box | padding-box | conten</code><code>t-box</code>]]*
</pre>
<h2 id="Valores">Valores</h2>
<dl>
<dt>
border-box</dt>
<dd>
<p>El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.</p>
</dd>
<dt>
padding-box</dt>
<dd>
<p>El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.</p>
</dd>
<dt>
content-box</dt>
<dd>
<p>El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.</p>
</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre>div{
border:4px dotted #FBE700;
background:url('imagen.jpg');
background-position:0 0;
background-origin:border-box;
}
</pre>
<pre>div{
background-image: url('image1.jpg'), url('image2.jpg');
background-position: 0 0, bottom left;
background-origin: padding-box, content-box;
}
</pre>
<h2 id="Notas">Notas</h2>
<ul>
<li>La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed.</li>
<li>Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) <a href="/es/CSS/background" title="background">background</a> que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background.</li>
</ul>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>1.0</td>
<td>4.0 (2.0)</td>
<td>9.0</td>
<td>10.5</td>
<td>3.0 (522)</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Especificaciones">Especificaciones</h2>
<ul>
<li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-origin" title="http://dev.w3.org/csswg/css3-background/#the-background-origin">Css fondos y bordes modulo nivel 3 </a> (candidato a recomendación]</li>
</ul>
<h2 id="Relacionado">Relacionado</h2>
<p><a href="/es/CSS/background" title="es/CSS/background">background</a>, <a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a><a href="/es/CSS/background-image" title="es/CSS/background-image">, background-image</a>,<a href="/es/CSS/background-repeat" title="es/CSS/background-repeat"> background-repeat</a></p>
|
