Los degradados CSS nos permiten mostrar transiciones suaves entre dos o más colores. Se pueden agregar encima de la imagen de fondo simplemente combinando la URL de la imagen de fondo y las propiedades de degradado .
Sintaxis:
- Para gradiente lineal en la parte superior de la imagen de fondo:
element {
background-image: linear-gradient(direction,
color-stop1, color-stop2, ...), url('url');
}
- Para degradado radial sobre la imagen de fondo:
element {
background-image: radial-gradient(direction,
color-stop1, color-stop2, ...), url('url');
}
A continuación se muestran ejemplos que ilustran el enfoque anterior:
Ejemplo 1: Imagen de fondo con el degradado lineal .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image with Linear Gradient</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.my_bg {
background-image:
linear-gradient(45deg,
rgba(245,70,66, 0.75),
rgba(8,83,156, 0.75)), url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="my_bg">
<h3>This is my background!</h3>
</div>
</body>
</html>
Producción:
Ejemplo 2: Imagen de fondo con el degradado radial .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image with Radial Gradient</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.my_bg {
background-image: radial-gradient(
rgba(255, 49, 3, 0.896),
rgba(251, 255, 0, 0.75)), url(
'https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png');
width: 100%;
height: 250px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_bg">
<h4>This is my background!</h4>
</div>
</body>
</html>
Producción:
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por shruti10gandotra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA