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