Vamos a utilizar la propiedad Shorthand en este artículo para establecer diferentes propiedades de fondo.
- Para reducir la longitud del código CSS, podemos declarar las propiedades de fondo en una línea a través de «Propiedad abreviada».
- A través de esta propiedad podemos definir diferentes propiedades de fondo en una sola línea en lugar de usar background-color, background-image y otras propiedades en varias líneas.
Las propiedades abreviadas le permiten especificar un conjunto de propiedades CSS relacionadas con una sola propiedad. Combinan propiedades relacionadas en una forma abreviada. En la mayoría de los casos, el navegador establece un valor predeterminado si omite uno opcional
Sintaxis:
fondo: bg-color bg-imagen posición/bg-tamaño bg-repetir bg-origen bg-clip bg-adjunto inicial|heredar;
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: skyblue url("image.png") no-repeat center;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Shorthand Property</h1>
<p>You can see that background property
are given in a single declaration</p>
</body>
</html>
Producción:
Ejemplo 2: propiedad abreviada con varias imágenes
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shortand property</title>
<style>
body {
background: url(image.png) left no-repeat,
url(image2.png) right bottom no-repeat #ffffff;
}
</style>
</head>
<body>
<center>
<h1>Shorthand Property</h1>
<p>The background property is a shorthand property for
specifying all the background properties in one declaration.</p>
<p>Here, we took the example of adding multiple
background images and aligned text between them </p>
<p>As we have used multiple background images, the
background-color parameter is moved to the end of the list</p>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por code_blooded7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA