2019年11月14日 星期四

多重背景圖片的使用


* 圖片要用 透明的
* key sentence : background-image: url('images/grass.png'), url('images/birds.png'), url('images/rainbow.png');


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>多重背景圖片的使用</title>
    <style type="text/css" media="screen">
        body {
            font-family: microsoft jhengHei;
            background-image: url('images/bg2.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }

        div {
            width: 590px;
            height: 500px;
            padding: 5px;
            margin: 30px auto;
            border: 1px #333 solid;
            background-color: #fff;
            background-image: url('images/grass.png'), url('images/birds.png'), url('images/rainbow.png');
            background-size: cover;
        }

        div p {
            line-height: 18px;
            letter-spacing: 1px;
            text-align: justify;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>

</head>

<body>
    <div>
        <p>Responsive website design is a new trend in web.
        </p>
    </div>
</body>

</html>


沒有留言:

張貼留言