From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/background-clip/index.html | 171 ++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/es/web/css/background-clip/index.html (limited to 'files/es/web/css/background-clip/index.html') diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html new file mode 100644 index 0000000000..2c8b8daf79 --- /dev/null +++ b/files/es/web/css/background-clip/index.html @@ -0,0 +1,171 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - Diseño + - Fondo CSS + - Propiedad CSS + - Referencia + - Referência(2) + - Web +translation_of: Web/CSS/background-clip +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

+ +

Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); de lo contrario el borde cubre la diferencia.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis Formal: {{csssyntax("background-clip")}}
+ +
background-clip: border-box
+background-clip: padding-box
+background-clip: content-box
+
+background-clip: inherit
+
+ +

Valores

+ +
+
border-box
+
El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z).
+
padding-box
+
El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding).
+
content-box
+
El fondo se dibuja desde donde inicia el contenido.
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="border-box">The yellow background extends behind the border.</p>
+<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
+<p class="content-box">The yellow background extends only to the edge of the content box.</p>
+
+ +

Contenido CSS

+ +
p {
+   border: 5px navy;
+   border-style: dotted double;
+   margin: 2em;
+   padding: 2em;
+   background: #F8D575;
+}
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+ +

Salida

+ +

{{ EmbedLiveSample('Ejemplo', 540, 450) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad del navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico1.0 [3]{{ CompatGeckoDesktop("2.0") }} [1]9.0 [2]10.53.0 (522) [3]
content-box1.0 [3]{{ CompatGeckoDesktop("2.0") }} [1]9.0 [2]12.0 (maybe earlier)3.0 (522) [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.1{{ CompatGeckoMobile("14") }}7.112.1{{ CompatVersionUnknown() }}
content-box4.1{{ CompatGeckoMobile("14") }}7.112.1{{ CompatVersionUnknown() }}
+
+ +

[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, que se corresponde con Firefox 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: -moz-background-clip: padding | border.

+ +

[2] Internet Explorer 7 soportado, pero en otras versiones de Internet Explorer se comporta como background-clip:padding si overflow es: hidden | auto | scroll.

+ +

[3]Webkit también es compatible con prefijo en esta propiedad, y en ese caso, además de las palabras clave actuales, los sinónimos alternativas son: padding, border, and content.

+ +

[4] Konqueror 3.5.4 tiene soporte con -khtml-background-clip.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf