VisualStudio怎么給網(wǎng)頁插入全屏顯示的背景圖片?

Visual Studio中想要給網(wǎng)頁制作背景圖,該怎么插入背景圖呢?下面我們就來看看詳細(xì)的教程。
1、首先,Visual Studio打開一個網(wǎng)站,本例為TwoFish,在網(wǎng)站中已放置了圖片資源,以及需使用的css樣式和js代碼。
2、首先,在網(wǎng)頁中找到body標(biāo)簽,如下圖所示。
3、接著找到div標(biāo)簽,如下圖所示。
4、輸入添加背景圖片的代碼,其中img是表示圖片的標(biāo)簽。
5、src是圖片保存的路徑,id則表示圖片屬性,即為背景。
6、找到head和meta標(biāo)簽,將光標(biāo)定位到title標(biāo)簽之后。
7、接著,插入css樣式代碼。link標(biāo)簽用來引用css樣式,href用來指定css的路徑,rel表示當(dāng)前文檔與鏈接文檔之間的關(guān)系。
8、然后,插入js代碼。用script標(biāo)簽引用js文件,src表示js文件的路徑,
9、控制圖片顯示的代碼,都已放在相應(yīng)的css樣式和js代碼中了,這里就不再贅述了。
10、最后,用script標(biāo)簽引用一個函數(shù),實現(xiàn)將圖片設(shè)置為全屏的背景。
11、在網(wǎng)頁文件上右擊,選擇在瀏覽器中查看選項。
12、看到圖片在網(wǎng)頁中,作為背景全屏顯示了。
以上就是Visual Studio中制作全屏顯示背景圖的教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
Visual Studio 2015怎么改變WPF窗體程序的背景圖片?
相關(guān)文章
VisualStudio使命使用代碼實現(xiàn)網(wǎng)頁的整體布局?
VisualStudio使命使用代碼實現(xiàn)網(wǎng)頁的整體布局?Visual Studio中想要使用代碼實現(xiàn)網(wǎng)頁布局,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-04-11vscode如何關(guān)閉自動更新提示?visual studio code禁止自動更新的方法介
最近,很多網(wǎng)友問小編vscode如何關(guān)閉自動更新提示?今天小編就給大家詳細(xì)介紹一下visual studio code禁止自動更新的方法,非常簡單,需要的朋友一起去了解一下吧2018-04-11visual studio code怎么改快捷鍵?vscode修改默認(rèn)快捷鍵的方法介紹
使用vscode時,經(jīng)常會遇到和其他軟件快捷鍵沖突的問題,這個時候我們需要修改快捷鍵,那么,visual studio code怎么改快捷鍵?今天小編就給大家詳細(xì)介紹一下vscode修改默認(rèn)2018-04-11VisualStudio2015怎么設(shè)置字體格式? vs設(shè)置字體樣式的教程
VisualStudio2015怎么設(shè)置字體格式?vs2015中想要對文本編輯器中的字體格式大小進(jìn)行編輯,該怎么實現(xiàn)呢?下面我們就來看看vs設(shè)置字體樣式的教程,需要的朋友可以參考下2018-04-10vscode(Visual Studio Code)配置PHP開發(fā)環(huán)境的方法(已測)
Visual Studio Code一個輕量且強大的代碼編輯器,支持Windows,OS X和Linux。內(nèi)置JavaScript、TypeScript和Node.js支持,而且擁有豐富的插件生態(tài)系統(tǒng),可通過安裝插件來支2018-04-06Windows下Visual Studio Code 快捷鍵大全
Visual Studio Code 是一款優(yōu)秀的編輯器,非常適合編寫 TS 以及 React 。最近在學(xué)習(xí) AngularJs 2,開始使用 VSCode,特意整理翻譯了一下官網(wǎng)的快捷鍵2018-04-05Visual Studio Code 使用指南(vscode技巧)
VSCode是微軟推出的一款輕量編輯器,采取了和VS相同的UI界面,搭配合適的插件可以優(yōu)化前端開發(fā)的體驗,這里為大家介紹一下vscode的技巧,需要的朋友可以參考下2018-04-05visual studio code教程 vscode的基礎(chǔ)使用和自定義設(shè)置方法
這篇文章主要基于基礎(chǔ)web前端開發(fā),visual studio code教程——基礎(chǔ)使用、擴(kuò)展插件安裝使用以及少許自定義配置,需要的朋友可以參考下2018-04-04VS Code有哪些常用的快捷鍵? Visual Studio Code常用快捷鍵大全
Visual Studio Code簡稱VSCode,是一款好用的代碼編輯器,最近,很多網(wǎng)友問小編VS Code有哪些常用的快捷鍵?今天小編就給大家整理了最高效的Visual Studio Code常用快捷鍵大2018-04-03visualstudio怎么刪除代碼段管理器? vs代碼段管理器的移除方法
visual studio怎么刪除代碼段管理器?visual studio暫時不用代碼段管理器,該怎么刪除呢?下面我們就來看看vs代碼段管理器的移除方法,需要的朋友可以參考下2018-03-26