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

學無先后，達者為師

網站首頁 編程語言 正文

background-image 背景平鋪方式、 CSS3 background-size背景圖像大小

作者：正在修煉web的小芮 更新時間： 2022-11-08 編程語言

background-image 背景平鋪方式

body樣式

<body>
    <div class="box"></div>
</body>

css樣式

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 1000px;
            border: 3px solid pink;
            margin: 20px auto 0;

            background-image: url(./img/bj1.jpeg);
            background-repeat: no-repeat;

? ? ? ? ? ? /* 設置背景圖的大小 */

? ? ? ? ? ? /* 100px 120px 指定背景圖寬度100px 高度120px */

? ? ? ? ? ? /* background-size: 100px 120px;*/

?/* 只給一個值 100px是背景圖的寬 ?高度自適應 */

? ? ? ? ? ? /* background-size: 100px; */


?

? ? ? ? ? ? /* 50% 80% 表示寬是50%，高是80% */

? ? ? ? ? ? /* background-size: 50% 80%; */

? ? ? ? ? ? /* 100% 100% 背景圖的寬是100% 高是100% 會全部顯示出來，但有可能圖的比例失調 （壓扁）*/

? ? ? ? ? ? /* background-size: 100% 100%; */

? ? ? ? ? ? /* cover 表示按照圖的縱橫比，顯示的可能是圖的一部分 */

? ? ? ? ? ? /* background-size: cover; */

?

       background-size: contain;

        }
    </style>

?效果

?

background-size指定 背景圖像的大小。

CSS3以前，背景圖像大小 由 圖像的實際大小 決定。

CSS3中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。您可以指定像素或百分比大小。

你指定的大小是相對于父元素的寬度和高度的百分比的大小。

語法：

background-size: length|percentage|cover|contain;

background-size: length 設置背景圖片高度和寬度。

background-size: 80px 60px; 指定背景圖寬度是80px，背景圖高度是60px；

?body樣式

<body>
    <div class="box"></div>
</body>

css樣式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 1000px;
            border: 3px solid pink;
            margin: 20px auto 0;

            background-image: url(./img/bj1.jpeg);
            background-repeat: no-repeat;
            /* 設置背景圖的大小 */
            /* 100px 120px 指定背景圖寬度100px 高度120px */
            /* background-size: 100px 120px;*/


            /* 只給一個值 100px是背景圖的寬  高度自適應 */
            /* background-size: 100px; */


            /* 50% 80% 表示寬是50%，高是80% */
            /* background-size: 50% 80%; */

            /* 100% 100% 背景圖的寬是100% 高是100% 會全部顯示出來，但有可能圖的比例失調 （壓扁）*/
            /* background-size: 100% 100%; */

            /* cover 表示按照圖的縱橫比，顯示的可能是圖的一部分 */
            /* background-size: cover; */

            background-size: contain;

        }
    </style>

效果

?

原文鏈接：https://blog.csdn.net/m0_71814235/article/details/126016632

欄目分類
最近更新