1

Intento hacer un degradado pero al momento de visualizarlo siempre se muestra en blanco como si las propiedades que le agrego al css estuviesen mal escritas o nunca las tomara, si dejo una sola propiedad como background: green; esta propiedad si la toma pero al momento de añadir las demás propiedas del body ya no se muestra nada

body{
    height: 100%;
    width: 100%;
    background: rgb(117,168,68);
    background: -moz-linear-gradient(159deg, rgba(117,168,68,1) 25%, rgba(52,107,45,1) 73%);
    background: -webkit-linear-gradient(159deg, rgba(117,168,68,1) 25%, rgba(52,107,45,1) 73%);
    background: linear-gradient(159deg, rgba(117,168,68,1) 25%, rgba(52,107,45,1) 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#75a844",endColorstr="#346b2d",GradientType=1);
}

#Logo {
    position: absolute;
    bottom: 0;
    right: 0;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cargando recursos...</title>
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets\css\style_encuestas.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body>
    <div id="Logo">
        
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</html>

¿Que puede estar afectando que se muestre siempre en blaco el degradado?

1
  • Estuve revisando tu codigo, y coseguí que añadiendo contenido a un div me mostraba el color de fondo
    – Lilibeth
    el 23 sep. 2021 a las 22:59

1 respuesta 1

0

Podrías aplicar un alto de 100vh al body para que se adapte al total del alto de la ventana.

100vh = 100% de la altura de la ventana

100% = 100% de la altura del elemento principal

Las etiquetas html y body no tienen un tamaño por defecto.

body{
    height: 100vh;
    width: 100%;
    background: rgb(117,168,68);
    background: -moz-linear-gradient(159deg, rgba(117,168,68,1) 25%, rgba(52,107,45,1) 73%);
    background: -webkit-linear-gradient(159deg, rgba(117,168,68,1) 25%, rgba(52,107,45,1) 73%);
    background: linear-gradient(159deg, rgba(117,168,68,1) 25%, rgba(52,107,45,1) 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#75a844",endColorstr="#346b2d",GradientType=1);
}

#Logo {
    position: absolute;
    bottom: 0;
    right: 0;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cargando recursos...</title>
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets\css\style_encuestas.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body>
    <div id="Logo">
        
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.