opacity

We cab take advantage to display alerts/modals

by prasun_sultania

HTML

<body>
    <div>
        <p>
           The one big problem with CSS opacity is that it’s inherited by the contents of the element you’re
applying it to, as well as the background. So if you look closely, you’ll see that the
text on the page is showing through the alert text as well. This doesn’t matter if you’re using a
very high opacity in combination with high-contrast text. However, with lower opacities, the
content of your box can start to get unreadable. This is where RGBa comes in.
        </p>
    </div>
    <div class ="alert">
        <p>
            Hey this is an opacity alert
        </p>
    </div>
</body>

CSS

.alert {
background-color: #000;
border-radius: 2em;
opacity: 0.8;
    color: white;
    position: absolute;
    left: 30%;
    top: 40px;
filter: alpha(opacity=80); /*proprietary IE code*/
}

.alert p{
    padding: 0 10px 0 10px;
}