網頁背景圖片固定代碼案例源碼分享

2021-12-25 周末簡設

收錄於話題 #網頁設計 11個

 前話 

此篇已擱置很久，由於有個問題一直困擾我，導致沒有狀態和精力去更新，一直在努力得調整自己，堅持，堅持，再堅持，相信黎明不會缺席，希望自己能夠和大家分享更多的作品。曾經我在學校的時候，看到別人做的網頁設計，背景居然能夠固定，不隨著滾動條滾動，當時就覺得很酷，就追問是怎麼實現的，後來才明白，其實實現很簡單，就是通過css來實現，今天就為大家準備了此篇專題，希望對大家能有一點用處。

先看看上面的效果圖，小夥伴們可以將背景圖換成自己喜歡的圖片。

關鍵代碼 

<style>  body{background:#fff url(bg.jpg) center 0 repeat-y fixed;background-size:cover;color:#333;padding:0;font:14px/180% verdana,'思源黑體 CN', sans-serif;}</style>
 代碼釋義 
1、body{}
表示 body css選擇器
2、background:#fff url(bg.jpg) center 0 repeat-y fixed;
表示設置背景圖片，y軸重複，並且背景圖片固定
3、background-size:cover;
表示背景圖片平鋪
4、padding:0;
表示設置body的內邊距為0
5、font:14px/180% verdana,'思源黑體 CN', sans-serif;
表示選擇字體，並且設置字體的大小
 源碼下載 
關注微信公眾號：youtiyblog 回復 "背景固定" 即可下載

相關焦點

  • HTML網頁代碼大全
    ：<body background="背景圖片地址"> 20)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" bodybgproperties=fixed> 21)定製帖子背景顏色：<body bgcolor="#value">(value值見10)
  • 學習網頁製作並不難,HTML菜鳥教程,從這裡開始第一課學習
    拿最常見的網頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網頁上點右鍵，選擇「查看源」即可查看當前網頁的HTML源碼；如果是其他瀏覽器的話，多數情況下點擊右鍵，選擇「查看源碼」或者類似「查看網頁原始碼」這樣的選項即可查看。當然也可以通過專業的網頁製作軟體以及各種文本編輯器來查看。
  • 第一彈:製作家鄉網頁設計的全過程(圖文教程)
    親愛的小夥伴，歡迎光臨《周末簡設》，有許多小夥伴給我留言，想了解我發布的網頁設計作品的製作過程，應小夥伴的要求，今天就給大家分享一篇網設作業製作的全過程，目的是和大家一起互相學習，當然長篇大論你不高興讀，我也不願意寫，我儘量用通俗的文字來描述，圖文結合，重點的地方我會圈出來，有不對的地方，歡迎指正。
  • 值得你看網頁UI設計作品集案例分享
    以作品說話，也是一個不錯的宣傳自己的途徑幾款優秀網頁設計作品集案例分享1. Personal portfolioMike是一個有著豐富的設計經驗的平面設計師，擅長於以用戶為導向的精美平面設計，並且善於結合標識，圖標和插圖於一體的網站設計、應用程式、遊戲和用戶界面設計。
  • bootstrap+HTML5+css3網頁設計,抓住這幾大關鍵要點讓你事半功倍
    ，下圖所示，head標籤裡面的viewport是自適應設備代碼，要放在最前面。完整網頁案例代碼注意：js文件還需要單獨引入jQuery和popper這兩個js，並且順序是jQuery.js、popper.js、bootstrap.js
  • 網頁截圖和svg模版動態生成圖片Java實現
    通過PhantomJS來實現這種方式是不能實現這個需求的這個的原理就是對網頁截圖 但只能對於靜態頁面截圖 不能根據不同的參數值動態生成圖片所以不提倡使用這種方式但也介紹下這種使用方式 朋友們根據自己的實際需求情況有選擇的使用通過html代碼實現圖片的效果 放入web容器(比如nginx)中部署這是h5代碼
  • 「計算機畢設」一個精美的JAVA博客系統源碼分享
    前言大家好，我是程式設計師it分享師，今天給大家帶來一個精美的博客系統源碼！可以自己買一個便宜的雲伺服器，當自己的博客網站，記錄一下自己學習的心得。開發技術博客系統源碼基於SpringBoot,shiro，Bootstrap,JPA等技術開發而成。有前臺網頁和後臺管理兩個訪問地址。具體實現了文章，圖片視頻的發布；按標籤分類，支持ueditor，markdown編輯器；支持評論回復，關注，QQ，微博等第三方的登錄；站內搜索，響應式布局和訂閱功能。
  • web網頁設計基礎:HTML案例(二)
    往期內容:web網頁設計基礎:HTML案例(一) 點擊下邊歌曲 聽聽歌放鬆一下啦！      【溫馨提示】Dreamweaver，簡稱DW為Adobe公司的一款網頁編輯器,可以為編寫代碼省去大量時間，比如插入圖片和視頻，只需要拖到適當位置，這個操作相當於我們手動輸入一串代碼,如果需要該軟體,也可也聯繫我哦,版本2020百度網盤永久免費版另外
  • 如何在HTML中添加背景圖片?
    按照以下步驟，我們可以輕鬆實現。步驟1：我們在文本編輯器中鍵入HTML代碼，或者用文本編輯器打開現有的HTML文件。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>奔月教程(runoon.com)</title> </head> <body background
  • CSS-圖片背景
    今天糊弄一個圖片背景，展示一下我自己畫的好嬌媚的封面！因為只有星標和老看我文章的朋友才能看到我的完整封面，這種朋友應該是薛丁格的朋友，我覺得他不存在，但也不能篤定說他完全不存在，所以我決定用封面圖做例子~剛入學寫網頁的時候很喜歡用圖片背景，因為在沒有資料庫大量數據做支撐的條件下，新寫的頁面非常空，看著很悽涼，隨便搞個圖片做背景就可以混淆視聽，營造一種熱鬧氛圍糊弄事兒，所以很值得學習一下。圖片背景的應用：網頁很少變化的圖片(比如小圖標)。
  • 雲適配怎麼用代碼幫助網頁移動化
    在移動網際網路的背景下，很多企業推廣的時候都會選擇開發APP，不過這個過程所需要的時間、人力成本都很高。而如果與我們的跨屏雲Xcloud服務合作，通過在網頁中插入我們提供的一行代碼就可以將PC版網頁變成移動版。這對於企業來說，既節省了成本，又能保證體驗。雷鋒網：能描述一下轉化的過程麼？
  • 部分網頁文字如何複製?一篇告訴你如何複製網頁文字
    部分網頁文字如何複製？一篇告訴你如何複製網頁文字 很多朋友上網有遇到過這樣的一種情況，明明看到網頁上有文字，但是這些文字無法選擇用滑鼠拖動選擇，也沒法複製下來。
  • 網頁禁止複製粘貼怎麼弄?教你五招輕鬆搞定
    方法一、截圖識別這個辦法手機和電腦都可以使用，現在手機都自帶文字識別功能，如果你是用手機瀏覽，發現不能複製，可以截圖，然後對圖片進行「識別文字」就可以把文字提取出來，也就可以複製了。方法三、查看原始碼如果藉助上面的方法「撿漏」不成功，可以動用查看原始碼的方法，這個方法基本可以搞定90%以上的網站，但操作起來麻煩。這種方法，複製下來的內容冗餘代碼單一還好，如果冗餘代碼多而雜，那就不推薦使用，比較需要花費的時間很多，這時可以考慮使用方法四。
  • html網頁的代碼大全(一)
    1)貼圖：<img src="圖片地址"> 2)加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a> 1)貼圖： 2)加入連接：寫上你想寫的字
  • 源碼不止Spring!阿里首推源碼成長筆記,深入底層不再蒙圈
    咳咳咳不要想歪，是Spring+MyBatis源碼！！！別的不說，我想先問大家一個問題：不會有人真的喜歡看源碼吧！在我的認知裡喜歡看源碼的都是「變態」，都是大哥！現實中大多數人都是為了漲薪或者一些其他的原因才會去主動接觸源碼（手動狗頭）。但是在現在網際網路大勢所趨下，源碼閱讀已經是一個優秀軟體開發者必備的能力。
  • 網頁禁止複製粘貼怎麼辦?教你六招輕鬆搞定
    [PConline技巧]經常在網上遇到一些無法複製的文章，那麼問題來了，有什麼辦法可以繞開這種限制，將網頁內容輕鬆下載回來呢？其實既然是網頁內容，那麼意味著HTML代碼是公開的，將相關文本複製下來根本不是問題，一起來看看要怎麼做吧。
  • 百度大牛甩出筆記全新演繹Spring 5新特性,原理+源碼+實戰三飛
    它的重要性想必不用我多說了，作為一位身處於2020年的Java程式設計師，從源碼到實際開發，Spring這一塊是我們繞不過去的坎。既然繞不過去，那就啃下他！對於Spring的學習，小編前段時間剛好在百度的一位大佬手上拿到一份Spring進階寶典，看了之後，發現市面上的資料與其差距不止一點點！
  • 千圖網千庫網無需開通VIP,免費下載無水印圖片素材方法
    所以系統迷這次就琢磨著，給大家分享下千圖網千庫網免費下載無水印圖片素材的方法。千圖網千庫網無水印圖片素材免費下載方法我們都知道，素材網頁展示這個素材時，都會附上素材的展示圖，這個展示圖清晰度其實蠻高的，但可惜的是，官方都給它打上水印了。所以你如果直接右鍵另存為，得到的圖片還得去水印，非常麻煩。
  • 企業網站常用到網頁製作軟體有哪些?
    網頁製作從圖片處理，Flash，資料庫等完成，我們來看看網絡上常用的軟體有那些：使用FrontPage製作網頁，你能真正體會到「功能強大，簡單易用」的含義。頁面製作由FrontPage中的Editor完成，其工作窗口由3個標籤頁組成，分別是「所見即所得」的編輯頁，HTML代碼編輯頁和預覽頁。FrontPage帶有圖形和GIF動畫編輯器，支持CGI和CSS。嚮導和模板都能使初學者在編輯網頁時感到更加方便。
  • 網頁設計有難題?12款網頁設計模板給你靈感!
    這裡，Mockplus為大家整理了一些設計精細並且優質的免費網站設計模型，或許可以為你下一次的網頁模型設計提供一些思路。免費網頁模型在參考階段，免費的網頁模型往往是初學者的首選。毫不猶豫，我們為大家奉上一批免費的網頁模型案例，拿走不謝！1.