CSS | Combinar imagen de fondo con superposición de degradado

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:

element {
   background-image: linear-gradient(direction, 
    color-stop1, color-stop2, ...), url('url');
}
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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *