網頁背景圖片設置的點滴積累

時間 2019-11-11

標籤網頁背景圖片設置點滴積累欄目 HTML 简体版

原文原文鏈接

作網站前端這麼多年了，無論是divcss技術，仍是ps網頁設計都積累了很多東西，不少時候都感受網站前端真是個技術與藝術結合的產物，無論是技術仍是藝術，都得懂，並且是很懂。css

今天一個客戶問起網頁背景圖片怎麼樣設置纔可以是網頁看起來漂亮，讓用戶感受起來舒服，提升粘剔性，又不會影響到網頁的加載速度。html

那我就順便總結了一下，其實網頁背景設置無外乎幾個方面，關於圖片和顏色：前端

第一：圖片要儘可能的小，充分利用頁面平鋪技術，進行平鋪，網頁背景圖片基本都是能夠平鋪的。瀏覽器

第二：圖片儘可能作到不那麼耀眼，由於網頁背景畢竟只是個裝飾做用的，不可以喧賓奪主，掩蓋了網頁主題內容。測試

那麼具體怎麼樣把圖片放在網頁上呢？這裏就須要用到css技術了，有些人看到css看到代碼就蒙了，其實很簡單的，給你們作個示範吧：網站

先看下沒有添加網頁背景的網頁代碼：url

<!DOCTYPE html>
<html>
<head>
<title>測試網頁</title>
</head>
<body>
這個是咱們的測試網頁
</body>
</html>

而後咱們添加一個網頁背景顏色：設計

<!DOCTYPE html>
<html>
<head>
<title>測試網頁</title>
<style>
body{ background:#333333;}
</style>
</head>
<body>

在瀏覽器打開修改後的網頁是否是有一個灰色的背景了。code

如今咱們在這個基礎上添加一個背景圖片：htm

<!DOCTYPE html>
<html>
<head>
<title>測試網頁</title>
<style>
body{ background:#333333 url(http://background.wandongli.com/upload/pic/1399113292.png);}
</style>
</head>
<body>
這個是咱們的測試網頁
</body>
</html>

在瀏覽器打開咱們修改後的網頁是否是有一個特別好看的網頁了。

其實網頁背景設置的關鍵是找到一個好看的背景圖片，這個向你們推薦一個專門作網頁背景的網站網頁背景（http://background.wandongli.com），裏邊還有不少精美的網頁背景，你們能夠去試試，我感受還不錯哦。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。