Background css does not work

Asked

Viewed 34 times

-1

Good evening, I would like to know why when I use this css style in my "bg" class in my html it works, but when I use the HTML5 version, the background style goes completely away, I searched a lot, but I couldn’t find a solution. Follows code.

HTML5: inserir a descrição da imagem aqui

Normal HTML code:

inserir a descrição da imagem aqui

<head>
    <title>Calculadora</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .button {
            width: 50px;
            height: 50px;
            font-size: 25px;
            margin: 2px;
            cursor: pointer;
            background: #607d8b;
            border: none;
            color: white;
        }

        .textview {
            width: 217px;
            margin: 5px;
            font-size: 25px;
            padding: 5px;
            border: none;
            color: #607d8b;
        }

        .main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%)translateY(-50%);

        }

        .bg {
            background: linear-gradient(to right, #e91e63, #3f51b5);
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="main">
        <form name='form'>
            <input class="textview" name="textview">
        </form>
        <table>
            <tr>
                <td> <input class="button" type="button" value="C" onclick="clean()"> </td>
                <td> <input class="button" type="button" value="<" onclick="back()"> </td>
                <td> <input class="button" type="button" value="/" onclick="insert('/')"> </td>
                <td> <input class="button" type="button" value="x" onclick="insert('*')"> </td>
            </tr>
            <tr>
                <td> <input class="button" type="button" value="7" onclick="insert(7)"> </td>
                <td> <input class="button" type="button" value="8" onclick="insert(8)"> </td>
                <td> <input class="button" type="button" value="9" onclick="insert(9)"> </td>
                <td> <input class="button" type="button" value="-" onclick="insert('-')"> </td>
            </tr>
            <tr>
                <td> <input class="button" type="button" value="4" onclick="insert(4)"> </td>
                <td> <input class="button" type="button" value="5" onclick="insert(5)"> </td>
                <td> <input class="button" type="button" value="6" onclick="insert(6)"> </td>
                <td> <input class="button" type="button" value="+" onclick="insert('+')"> </td>
            </tr>
            <tr>
                <td> <input class="button" type="button" value="1" onclick="insert(1)"> </td>
                <td> <input class="button" type="button" value="2" onclick="insert(2)"> </td>
                <td> <input class="button" type="button" value="3" onclick="insert(3)"> </td>
                <td rowspan="5"> <input class="button" style="height: 106px" type="button" value="=" onclick="equal()">
                </td>
            </tr>
            <tr>
                <td colspan="2"> <input class="button" style="width: 106px;" type="button" value="0"
                        onclick="insert(0)"> </td>
                <td> <input class="button" type="button" value="." onclick="insert('.')"> </td>
            </tr>
        </table>
    </div>


    <script src="script.js"></script>
</body>

</html>
css html5

1 answer

1


Try the cross browser CSS code, create the CSS code here:

.bg{

    background: rgba(233,30,98,1);
    background: -moz-linear-gradient(left, rgba(233,30,98,1) 0%, rgba(63,81,181,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(233,30,98,1)), color-stop(100%, rgba(63,81,181,1)));
    background: -webkit-linear-gradient(left, rgba(233,30,98,1) 0%, rgba(63,81,181,1) 100%);
    background: -o-linear-gradient(left, rgba(233,30,98,1) 0%, rgba(63,81,181,1) 100%);
    background: -ms-linear-gradient(left, rgba(233,30,98,1) 0%, rgba(63,81,181,1) 100%);
    background: linear-gradient(to right, rgba(233,30,98,1) 0%, rgba(63,81,181,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e91e62', endColorstr='#3f51b5', GradientType=1 );

}

.medidas {
    width: 300px;
    height: 200px;
    display: block;
}
<div class='bg medidas'></div>

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.