學(xué)生簡(jiǎn)單網(wǎng)頁設(shè)計(jì)中CSS背景圖片的各種屬性介紹

更新時(shí)間：2020-03-08 文章分類：網(wǎng)頁技術(shù)課堂

學(xué)生在制作網(wǎng)頁設(shè)計(jì)作業(yè)時(shí)，經(jīng)常需要簡(jiǎn)單做個(gè)網(wǎng)頁背景圖，CSS背景圖片屬性有很多種，今天為大家介紹幾種常用的適合學(xué)生網(wǎng)頁作業(yè)設(shè)計(jì)的方法。

background-repeat：設(shè)置圖片平鋪方式
有三個(gè)屬性：no-repeat（圖片保留自身大小不平鋪）、repeat-x（圖片在水平方向上平鋪）、repeat-y（圖片在垂直方向上平鋪）

background-position：確定圖片顯示的位置

background-position: 30px 50px; 圖片在水平方向上向右偏移30px，在垂直方向上偏移50px

background-position: right bottom; 圖片顯示在右下角

background-position: center; 圖片顯示在中間

background-position: right top; 圖片顯示在右上角

background-position: left bottom; 圖片顯示在左下角

background-position: center top; 圖片顯示在上中間

background-size：背景圖片的大小

background-size: 100% 100%; 背景圖片的大小

background-size: contain; contain：圖片寬高等比例縮放，直到寬或高填滿父布局，有可能出現(xiàn)布局填充不完整。

background-size: cover; cover：圖片寬高等比例縮放，直到較小的寬或高填滿父布局，可能出現(xiàn)圖片溢出。

————————————————

STU-WORK代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 400px;
            border: 1px solid red;/*1px的紅色實(shí)線*/
            background-color: blue;
            background-image: url("../../img/lianxiang.jpg");
 
            background-repeat: no-repeat;/*1、no-repeat 圖片保留自身大小，不平鋪
                                          2、repeat-x 水平方向上圖片平鋪
                                          3、repeat-y 垂直方向上圖片平鋪*/

       
            background-position: center top;
            /*background-size: 100% 100%;*/ /*背景圖片的大小*/
            /*background-size: contain;*//*contain：圖片寬高等比例縮放，直到寬或高填滿父布局，有可能出現(xiàn)圖片填充布局不完整*/
            background-size: cover; /*cover:圖片寬高等比例縮放，直到較小的寬或高填滿父布局，可能出現(xiàn)圖片溢出*/
 
 
        }
    </style>
    <title>背景圖片</title>
</head>
<body>
<div>

</div>
</body>
</html>

上一篇：HTML網(wǎng)頁設(shè)計(jì)中CSS最小最大寬高使用教程

下一篇：學(xué)生網(wǎng)頁設(shè)計(jì)中常用的簡(jiǎn)單設(shè)置網(wǎng)頁背景圖片方法

學(xué)生簡(jiǎn)單網(wǎng)頁設(shè)計(jì)中CSS背景圖片的各種屬性介紹

作品推薦

相關(guān)文章