Web前端開發基礎知識，設置網頁背景圖，如何在網頁中插入圖片

片

一、圖片的表現形式

當我們在制作頁面的時候，通常會遇到圖片的三種表現形式，如下：

1、內容圖片

內容圖片是頁面中真正的內容，沒有內容圖片，就無法完整的理解頁面內容。如淘寶網上的商品展示圖片，這些圖片是網頁的一部分，它們能幫助你決定這個頁面的內容是否是你需要的。

內容圖片

2、布局圖片

布局圖片出現在頁面背景中，要想理解頁面的內容，它們不是必須的。如蘋果官網的這個圖片，沒有這個圖片也能理解頁面上文字描述的內容是什么意思。

布局圖片

3、交互圖片

圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產品，箭頭圖片點擊可以看到更詳細的產品等。

交互圖片

二、創建內容圖片

在HTML中我們用 img 標簽創建圖片，英文是image的縮寫。

<img src="" alt="">

內容圖片

img是空標簽，沒有結束標簽
src屬性的值是一個圖片的URL地址，地址可以是相對路徑，也可以是絕對路徑
alt屬性：填寫對這張圖片的簡單描述，增加圖片的可訪問性
圖片應該被存放在單獨的文件夾中，如：images文件夾

三、創建布局圖片

布局圖片是在CSS中被創建出來的，使用CSS中的background屬性，如：

1）background-color 定義背景顏色，設置背景圖片時，要始終設置背景顏色，確保背景圖片沒有成功時會顯示一個背景顏色

2）background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。

3）background-repeat可以設置背景是否平鋪在容器中，包含四個關鍵字：

background-repeat：repeat 可以設置背景圖片橫向和縱向都平鋪。
background-repeat：no-repeat 設置圖片不平鋪，圖片默認顯示在容器的左上角
background-repeat：repeat-x 設置圖片只能在橫向平鋪
background-repeat：repeat-y 設置圖片只能在縱向平鋪

4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個關鍵字，如：

background-position：top left 設置圖片顯示在容器的左上角，第一個關鍵字可以是top、center、bottom，第二個關鍵字可以是left、center、right

CSS中和背景相關的屬性可以簡寫在一行中，如：

background: #FF1298 url(images/logo.png) center right no-repeat;

首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。

布局圖片

四、創建用戶交互圖片

Web上最常用的三種圖像格式

1）Jpeg 可以展示一張照片或者復雜圖像

可以表示多達1600萬種顏色，即所有的十六進制顏色
不支持圖像透明
不支持動畫
擴展名為.jpg或.jpeg

2）png最適合展示網頁插畫、logo和網頁小圖標

可以表示上百萬種不同顏色的圖像
包括png-8、png-24和png-32，取決于想表示多少種顏色
可以設置顏色透明
不支持動畫
擴展名為.png

3）gif適合展示網頁插畫、logo和網頁小圖標

可以表示最多256種不同顏色
可以設置顏色透明
支持動畫
擴展名是.gif

建議：

復雜顏色的圖像和照片則要使用jpeg格式
動態圖像要使用gif格式
png格式的透明圖片要比gif格式的更平滑
這三種圖像相對于其他格式的圖像文件比較小，適合web頁面高效展示

一般情況下用戶交互圖片都是一些小圖標，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個文件中，可以提高網絡和服務器性能，如：

交互圖片

具體如何操作呢？后續教頭會通過視頻給大家詳細演示，請繼續關注。

、任務介紹：

高保真的完成下圖布局：

二、分析布局

首先要分析一下各個模塊的布局

我們依舊使用的盒子模型。

首先先分為兩個大盒子（紅色邊框）header 盒子和 content 盒子。

其中content中相對對來說比較簡單，就需要添加需要的內容文字就好啦。

header相對于基本作業要復雜一些。

在header中首先要分為兩個盒子（綠色邊框）第一個盒子head裝的是標題，下面的盒子info_box裝了三個盒子。包括信息盒子info、評論盒子comment_box評論盒子、分享盒子share_box。

評論盒子comment_box中分為 join div元素和 comment div元素

分享盒子share_box中分為sina （微博）qqzone（qq空間）wechat（微信）

大體的布局還是用div元素實現，其中信息盒子與評論盒子打算用p+span元素實現，分享盒子用div+“雪碧圖”實現。

標題框和內容框的距離為40px。

三、完成html代碼

根據我們上面對各個模塊布局的分析，我們接下來就可以寫html代碼啦～其中在header的info盒子，其中信息盒子與評論盒子打算用p+span元素實現（語義化更好一點），分享盒子用div+“雪碧圖”實現。

（這里還是有需要的改進的地方，比如行前面的空格我是使用的空格鍵，應該還有更好的方法，請大佬指教嘿嘿～）

代碼如下：

<html>

<head>
    <title>加分作業
    </title>

    <link rel="stylesheet" href="css/demo2.css">

</head>

<body>
    <div class="container">
        <div class="header">
            <p class="head">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
            <div class="info_box">
                <p class="info">
                    <span>2020年5月21日 08:38:23</span><br>
                    <span class="text">來源：</span>
                    <span class="sourse">蠟筆小新醬</span>
                    <span class="icon_1"> </span>
                </p>
                <div class="comment_box">
                    <p class="join"><span>0</span>人參與</p>
                    <p class="comment"><span>0</span>人評論</p>
                    </p>
                </div>
                <div class="share_box">
                    <div class="sina"></div>
                    <div class="qqzone"></div>
                    <div class="wechat"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <p><span>      我的名字是蠟筆小新，我今年五歲，我很快樂，我的媽媽是美牙，我的爸爸是廣治
            </span><br>我的朋友有</span><br/>      阿呆<br/>      風間
                <br/>      正南<br/>      妮妮<br/>      小白<br/></p>

        </div>


    </div>
</body>

</html>

四、CSS美化

為了盡可能高保真，我們要測量一下各個模塊之間的距離。

標題框和內容框的距離為40px

在整個標題盒子 header中，標題head和信息盒子info_box之間的距離30px

在信息盒子中，來源盒子info和評論盒子comment_box的距離是228px

評論盒子comment_box和分享盒子share_box之間的像素是30px

其中來源盒子info中的時間和來源之間的像素是10px

在評論盒子中的參與和評論之間的像素為20px

在分享盒子中每個圖片之間的距離為10px

css代碼如下：

* {
    margin: 0px;
    padding: 0px;
}

.container {
    width: 670px;
    height: 800px;
    margin: auto;
}

.head {
    font: bold 24px Microsoft Yahei;
    margin-top: 40px;
}

.info {
    font: 12px Microsoft Yahei;
    color: #999;
    margin: 25px 0 5px 0;
    line-height: 20px;
    width: 350px;
}

.header {
    height: 142px;
    width: 655px;
    border-bottom: 1px solid #828181;
    display: flex;
    flex-direction: column;
}

.content p {
    line-height: 40px;
    font: Microsoft Yahei;
    color: #636363;
    margin-top: 40px;
}

.content p span {
    line-height: 15px;
}

.icon_1 {
    background: url("../img/icon_1.png") no-repeat 2px center;
    padding: 19px;
}

.info_box {
    display: flex;
}

.comment_box {
    display: flex;
    color: #999;
    margin: 40px 30px 5px 0;
}

.comment_box p {
    font: Microsoft Yahei;
    font-weight: lighter;
    font-size: 12px;
}

.share_box {
    display: flex;
    font-size: 12px;
    height: 40px;
    margin: 32px 0px 5px 0;
}

.join {
    margin: 0px 20px;
}

.qqzone {
    margin-left: 10px;
}

.wechat {
    margin-left: 10px;
}

.comment_box span {
    font-family: 'Georgia';
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: red;
}

.sina {
    background-position: 0px 0px !important;
}

.qqzone {
    background-position: 0px -32px !important;
}

.wechat {
    background-position: 0 -66px !important;
}

.share_box div {
    width: 40px;
    height: 30px;
    background: url(../img/icon_3.jpg);
}

五、CSS美化分析

1.使用行內元素span標簽。作為行內元素span標簽使用起來也很方便，作為一個小容器，可以把容器分為多個小容器，方便容器中個別部分應用樣式，對于容器中其他部分實現特別的效果。其中在評論盒子中用到。如下圖。我們可以看到 0人參與 0人評論可以用p元素一行完成，但是有一個問題，“0”的字體和顏色和別的字不太一樣。我們在實現的過程中可以再多寫幾個div 然后重新布局但是那樣太麻煩了，直接使用行內元素就可以搞定。

html代碼如下：

 <p class="join"><span>0</span>人參與</p>
 <p class="comment"><span>0</span>人評論</p>

css美化：

.comment_box {
    display: flex;
    color: #999;
    margin: 40px 30px 5px 0;
}
.comment_box span {
    font-family: 'Georgia';
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: red;
}

2.在分享盒子share_box中設置背景圖片的時候使用雪碧圖。

先來說一說雪碧圖是怎么回事

首先把網頁中一些背景圖片整合到一張圖片文件中（png格式）

再利用CSS的"background-image"引入圖片，配合"background- repeat"禁止平鋪

最后利用css的"background-position"進行背景精確的定位出背景圖片的位置（默認起始位置為background-position:0% 0%；如果background-position屬性值之設置一個，那么另一個默認為center。

我們需要加載的圖片素材是這樣的

而我們最后要的效果是這樣的，是三張分開的圖片，但是都是上面圖片的一部分

此時我們就可以用雪碧圖啦～先設置 sina wechat qqzone 這三個盒子的大小并使這三個盒子都以這張雪碧圖為背景：

.share_box div {
    width: 40px;
    height: 30px;
    background: url(../img/icon_3.jpg);
}

后在各個div中使用background-position進行定位。就是定位到我們想要的部分。

.sina {
    background-position: 0px 0px !important;
}
.qqzone {
    background-position: 0px -32px !important;
}
.wechat {
    background-position: 0 -66px !important;
}

特別要注意一點在給div添加定位時，要寫！important提升指定樣式規則的應用優先權。這樣才可以定位到不同圖片的坐標。

使用雪碧圖的優點：如果圖片來源于網頁的話，就可以減少http請求的次數，提高頁面加載速度。方便修改。

六、優化

根據我們以上的效果，我們可以進行一下優化。比如添加背景圖片～或者添加鼠標懸停的效果。

在這里，我（突發奇想）設計了此頁面的一個深色模式（其實就是把白底黑字換成暗底白色來）還有一些鼠標懸停的效果。

添加背景圖片的css代碼如下：

.container {
    width: 670px;
    height: 500px;
    margin: auto;
    background-position: center;
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

添加鼠標懸停效果css代碼如下：

.sourse:hover {
    color: red;
    cursor: pointer;
    text-decoration: underline;
}
.comment_box p:hover {
    cursor: pointer;
    text-decoration: underline;
    color: red;
}
.share_box div {
    cursor: pointer;
}

七：效果展示

高保真：

優化圖：

總結和反思：

1，添加css時，一定要寫這句：

* {
    margin: 0px;
    padding: 0px;
}

否則會頁面的內容不會貼頂，就是總是和頁面頂部有一些距離。

2，通過這次實驗我更進一步的體會到了盒子模型的一些特點，對boder margin padding 有了更深一步的理解。可以把盒子模型想成一個裝在快遞盒子里新手機盒。新手機是我們的內容，手機和手機盒的泡沫就是padding（內邊框），手機盒子的紙殼就是border（邊框），最后手機盒子和快遞盒子之間的距離就是margin（外邊距）。

在線咨詢

上一篇：超實用！公司領導最想用的一套PPT模板
下一篇：HTML5基礎入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商