第二十四课--图像透明/不透明opacity: 0.opacity: 1..background: url("4g..o

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像透明/不透明</title>
</head>
<style>
    #img {
        opacity: 0.1; /* 设置透明度*/
        filter: alpha(opacity=40); /* IE8 及其更早版本 */
    }

    #img:hover {
        opacity: 1.0;
    }

    .background {
        background: url("4g.jpg") repeat;
        width: 500px;
        height: 500px;
        border: 1px black solid;
    }

    .transbox {
        width: 300px;
        height: 300px;
        margin: 70px 70px;
        border: yellow 1px solid;
        opacity: 0.4;
        background-color: #ffffff;
    }

    .transbox p {
        margin: 30px 40px;
        font-weight: bold;
        color: #000000;
    }
</style>
<body>
<img src="demo.png" id="img" width="230px" height="230px" alt="">

<div class="background">
    <div class="transbox">
        <p>
            这些文本在透明框里。这些文本在透明框里。
            这些文本在透明框里。这些文本在透明框里。
            这些文本在透明框里。这些文本在透明框里。
            这些文本在透明框里。这些文本在透明框里。
            这些文本在透明框里。这些文本在透明框里。
            这些文本在透明框里。这些文本在透明框里。
            这些文本在透明框里。
        </p>
    </div>
</div>

</body>
</html>

opacity: 0.1; /* 设置透明度*/