日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

HTML+CSS之背景圖片的設置

作者：cloudOnSkyline 更新時間： 2022-07-22 編程語言

本文主要介紹如何在網頁布局中使用背景圖片。先逐個介紹基本的樣式，最后介紹樣式該如何簡寫。

1.background-color

設置背景顏色

2.background-image

設置背景圖片

3.background-repeat

設置背景圖片是否重復

4.background-position

設置背景圖片位置，可以設置具體偏移量，也可設置center/left/right/top/bottom,不設默認為center

5.background-size

設置圖片大小，第一個為寬，第二個為高，可設置具體值，設置寬度后高度等比例縮放。

可設置cover,圖片覆蓋整個區域

可設置contain，區域內會完整顯示圖片

6.background-clip

設置背景的范圍。有三個值，border-box,padding-box,content-box.背景顏色會延伸到設置的范圍內

7.background-origin

設置背景圖片偏移的位置，有三個值，border-box,padding-box,content-box.

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

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .test {
            width: 1000px;
            height: 500px;
            border: 50px dashed #ccc;
            padding: 50px;
            background-color: #f19d9d;
            background-image: url(./img1.jpeg);
            background-repeat: no-repeat;
            /* 第一個為水平偏移量，第二個為垂直偏移量.可設center/left/right,不設默認為center */
            background-position: 200px 50px;
            /* 第一個為寬度，第二個為高度。設一個相當于設了寬度，高度等比例變化 */
            background-size: 200px;
            /* cover:鋪滿 */
            /* contain:完整顯示 */
            /* background-clip控制背景范圍 */
            /* border-box:背景色延伸至border,設置虛線可看到 */
            /* background-clip: border-box; */
            /* padding-box:背景色延伸至padding */
            /* background-clip: padding-box; */
            /* content-box延伸至內容區 */
            background-clip: content-box;
            /* background-origin設置偏移圓點 */
            /* border-box設置邊框區左上角為原點 */
            /* background-origin: border-box; */
            /* padding-box設置內邊距區左上角為原點 */
            /* background-origin: padding-box; */
            /* content-box設置內容區左上角為原點 */
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div class="test">

    </div>
</body>

</html>

 8.簡寫形式

語法：

 background: #f19d9d url(./img1.jpeg) no-repeat 200px 50px/200px;

注意：大小要寫在位置后

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

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .test {
            width: 1000px;
            height: 500px;
            border: 50px dashed #ccc;
            padding: 50px;
            background: #f19d9d url(./img1.jpeg) no-repeat 200px 50px/200px;
            background-clip: content-box;
            background-origin: content-box;
        }
        /* 注：大小要寫在位置后 */
    </style>
</head>

<body>
    <div class="test">

    </div>
</body>

</html>

原文鏈接：https://blog.csdn.net/weixin_44827643/article/details/125919164

欄目分類
最近更新