Las hojas de estilo en cascada, conocidas con cariño como CSS , son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web. Describe cómo debe verse una página web: prescribe colores, fuentes, espaciado y mucho más. En resumen, puedes hacer que tu sitio web se vea como quieras. CSS permite a los desarrolladores y diseñadores definir cómo se comporta, incluso cómo se colocan los elementos en el navegador.
En este artículo, veremos cómo combinar una imagen de fondo y un degradado CSS3 en un mismo elemento.
Enfoque: Nuestra tarea es combinar la imagen de fondo con el degradado en el mismo elemento. Podemos lograr esta tarea usando las propiedades background-image , linear-gradient , height y width . Aquí, definiremos una etiqueta <div> que contendrá las propiedades de estilo requeridas que ayudarán a agregar el efecto degradado a la imagen de fondo.
Propiedad utilizada:
- altura: Esta propiedad se utiliza para definir la altura de la imagen.
- background-image: Esta propiedad se utiliza para establecer la imagen de fondo.
Sintaxis:
- Para gradiente linealencima de la imagen de fondo:
element {
background-image: linear-gradient(direction,
color-stop1, color-stop2, ...), url('url');
}
- Para gradiente radialencima de la imagen de fondo:
element {
background-image: radial-gradient(direction,
color-stop1, color-stop2, ...), url('url');
}
Ejemplo 1: En el siguiente ejemplo, veremos cómo combinar la imagen de fondo con el efecto comercial.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Background Image with Gradient
</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
body {
margin-left: 15px;
margin-right: 15px;
}
div {
background-image:
linear-gradient(45deg,
rgba(150, 150, 250, 0.42),
green),
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
height: 225px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b><p>
Combine background image and
gradient on same element
</p></b>
<div></div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, veremos cómo combinar la imagen de fondo con el efecto comercial.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image with Gradient</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
body {
margin-left: 15px;
margin-right: 15px;
}
div {
background-image:
linear-gradient(45deg,
rgba(160, 140, 250, 0.42), black),
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
height: 225px;
background-repeat: repeat-y;
width: 220px;
}
</style>
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b><p>
Combine background image and
gradient on same element
</p></b>
<div></div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA