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

Visual Studio中想要給網(wǎng)頁(yè)制作背景圖,該怎么插入背景圖呢?下面我們就來(lái)看看詳細(xì)的教程。

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