溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css引入圖片文件的方法

發布時間:2020-12-30 14:16:39 來源:億速云 閱讀:523 作者:小新 欄目:web開發

這篇文章給大家分享的是有關css引入圖片文件的方法的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

css引入圖片文件的方法:1、通過“background-image:url(圖片地址)”方法來引入;2、使用“background:url(圖片地址)”方法來引入圖片,展現到網頁中即可。

css引入圖片文件

在CSS中,可以用background-image:url(你的圖片地址)或background:url(你的圖片地址)來引入圖片,展現到網頁中。

<div id="bgimg"></div>
#bgimg {
background: #333 url(圖片路徑) center center no-repeat;
}

第一個參數,圖片底層的背景顏色,第二個參數,圖片路徑,第三個參數,圖片上下的相對位置(其他參數left,right),第四個參數,圖片左右的相對位置(top,bottom),第五個參數,圖片的重復(其他參數 repeat,repeat-x,repeat-y)。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景圖片設置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(1.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

效果圖:

css引入圖片文件的方法

說明:

background屬性是一個簡寫屬性,可以在一個聲明中設置所有的背景屬性。

background屬性就是專門設置背景的屬性,可以設置背景色,也可以設置背景圖片。

下面看看background可以設置的屬性:

background-color: 規定要使用的背景顏色。

background-position: 規定背景圖像的位置。

background-size: 規定背景圖片的尺寸。

background-repeat :規定如何重復背景圖像。

background-origin :規定背景圖片的定位區域。

background-clip: 規定背景的繪制區域。

background-attachment: 規定背景圖像是否固定或者隨著頁面的其余部分滾動。

background-image :規定要使用的背景圖像。

元素的背景是元素的總大小,包括填充和邊界(但不包括邊距)。默認情況下,background-image放置在元素的左上角,并重復垂直和水平方向。

感謝各位的閱讀!關于“css引入圖片文件的方法”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女