如何在css中設定背景影象
建立一個網站是一個很好的方式來表達自己。雖然有很多****工具，但自己寫是一個有趣的方式來了解更多的網站如何幕後工作。一個好的初學者專案是建立一個網站，並新增一個與CSS背景影象。這個專案將使您啟動和執行與HTML和CSS。
什麼是css格式(css)？
CSS代表級聯樣式表。它是一種程式語言，允許您設定標記語言的樣式。其中一種標記語言是HTML或超文字標記語言。HTML用於建立網站。儘管您可以使用HTML控制網站的一些樣式，CSS提供了更多的控制和設計選項。
用html建立基本網站
因為CSS只是一種樣式語言，要使用它，我們首先需要一些樣式。一個非常基本的網站將足以讓我們開始玩CSS。我們的頁面將顯示“你好世界”
<html> <head> </head> <body> <p>Hello World</p> </body></html>如果您不熟悉HTML，讓我們快速回顧一下所有元素的作用。如前所述，HTML是一種標記語言，這意味著它使用標記來標記文字。每當您看到一個單詞被<；gt；包圍時，它就是一個標記。有兩種型別的標記，一種標記使用<；>；標記節的開始，另一種標記使用<；/>；標記節的結束；。一節中的文字也旨在使這種區別更容易看到。
在我們的示例中，我們有四個標記。html標記指示哪些元素是網站的一部分。head標記包含頁面上未顯示但建立頁面所需的頁首資訊。所有顯示的元素都在主體標記之間。我們只有一個顯示的元素，p標籤。它告訴web瀏覽器文字是一個段落。
相關：10個簡單的CSS程式碼示例，你可以在10分鐘內學會
將css新增到html
現在我們有了一個簡單的頁面，我們可以用CSS自定義樣式。我們的頁面現在非常簡單，我們也無能為力，但是讓我們先讓我們的段落突出一些，這樣我們就可以透過新增邊框來區分它和背景。
<html> <head> </head> <body> <p style="border-style: solid;" >Hello World</p> </body></html>現在，我們的段落將被黑色邊框包圍。將CSS中的樣式描述新增到我們的段落標記中，告訴網站如何設定段落樣式。我們可以新增更多描述。讓我們增加段落周圍的空白或填充，並將文字居中。
<html> <head> </head> <body> <p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p> </body></html>我們的網站看起來更好，但我們的HTML開始看起來混亂的所有這些描述在段落標籤。我們可以把這些資訊移到標題上。我們的標題是為資訊，我們需要顯示正確的網站。
<html> <head> <style> p { text-align: center } #ourParagraph { border-style: solid; padding: 30px; } </style> </head> <body> <p id="ourParagraph" >Hello World</p> </body></html>現在我們的HTML更容易閱讀。你會注意到我們確實需要改變一些事情。style標籤告訴web瀏覽器樣式資訊，還告訴您要設定什麼樣式。在我們的示例中，我們使用了兩種不同的方法來告訴它應該使用什麼樣式。樣式標記中的p告訴web瀏覽器將該樣式應用於所有段落標記。#ourParagraph部分告訴它僅對具有ourParagraph id的元素進行樣式設定。注意，id資訊被新增到了我們身體中的p標籤中。
將css檔案匯入網站
將樣式資訊新增到標題中可以使程式碼更易於閱讀。但是，如果我們想以相同的方式設計許多不同的頁面，我們必須將文字新增到每個頁面的頂部。這看起來可能不是很多工作，畢竟您可以複製並透過它，但是如果您以後要更改元素，它會建立很多工作。
相反，我們將把CSS資訊儲存在一個單獨的檔案中，並匯入該檔案以設定頁面樣式。將樣式標記之間的資訊複製並貼上到新的CSS檔案中我們的cssfile.css.
p { text-align: center}#ourParagraph { border-style: solid; padding: 30px;}然後，將該檔案匯入HTML檔案。
<html> <head> <link rel="stylesheet" href="ourCSSfile.css"> </head> <body> <p id="ourParagraph" >Hello World</p> </body></html>使用css新增背景影象
既然你已經在HTML和CSS上有了堅實的基礎，新增一個背景影象將是小菜一碟。首先，確定要將背景影象賦給哪個元素。在我們的示例中，我們將為整個頁面新增背景。這意味著我們要改變身體的風格。記住，body標記包含所有可見元素。
body{ background-image: url("sky.jpg");}p { text-align: center}#ourParagraph { border-style: solid; padding: 30px;}要更改CSS中的主體樣式，首先使用body關鍵字。然後像前面那樣新增花括號{}。正文的所有樣式資訊必須在花括號之間。我們要更改的樣式屬性是background image。有許多樣式屬性。別指望把它們都背下來。為CSS屬性備忘單新增您想要記住的屬性。
相關：8酷的HTML效果，任何人都可以新增到他們的網站
在屬性之後，使用冒號指示如何更改屬性。要匯入影象，請使用url（）。它表示您正在使用連結指向影象。將檔案位置放在引號之間的括號中。最後，用分號結束該行。雖然空白在CSS中沒有意義，但是使用縮排可以使CSS更易於閱讀。
我們的示例如下所示：
如果由於影象的大小而導致影象顯示不正確，可以直接更改影象。但是，CSS中有一些背景樣式屬性可以用來改變背景。小於背景的影象將自動在背景中重複。要關閉此選項，請將background repeat:no repeat；新增到元素中。
還有兩種方法可以使影象覆蓋整個背景。首先，可以使用background size:100%100%；，將background size設定為螢幕大小，但這會拉伸影象，並且可能會使影象扭曲過多。如果不希望更改影象的比例，還可以將“背景大小”設定為“覆蓋”。封面會使背景影象覆蓋背景，但不會扭曲影象。
更改背景色
讓我們改變最後一件事。既然我們有了背景，我們的段落就很難讀了。讓我們把背景調成白色。過程是相似的。我們要修改的元素是“我們的段落”。#表示“ourParagraph”是一個id名稱。接下來，我們要將background color屬性設定為白色。
body{ background-image: url("sky.jpg");}p { text-align: center}#ourParagraph { background-color: white; border-style: solid; padding: 30px;}
好多了。
繼續用css設計你的網站
既然您已經知道如何更改不同HTML元素的樣式，那就太簡單了！更改樣式屬性的基本方法是相同的。確定要更改的元素，並描述如何更改屬性。學習更多知識的最好方法是使用不同的屬性。下一步你要挑戰自己改變文字的顏色。
- 發表於 2021-03-29 12:38
- 閱讀 ( 56 )
- 分類：程式設計
你可能感興趣的文章
如何透過3個簡單的步驟構建javascript幻燈片
... 今天我將向您展示如何從頭開始構建JavaScript幻燈片。我們直接跳進去！ ...
10個免費的adobe photoshop外掛，提供最佳創意套件
...個一鍵面板，或者你可以開啟附帶的獨立應用程式，對你如何將預設應用到你的照片進行更精細的控制。 ...
11 css模板網站：不要從頭開始！
... 沒有友好的介面來編輯它們，所以您至少需要知道如何在HTML文件中找到方法來新增自己的內容。要進行自定義，您需要對CSS有相當的瞭解。 ...
如何建立一個網站：初學者
...許你讀過我們的一些HTML（理解HTML）和CSS教程，但不知道如何在更大的專案中使用這些語言。 ...
如何在Windows10中設定幻燈片螢幕保護程式
螢幕保護程式似乎是一個老掉牙的話題。這不像以前的好日子，在你的桌面上有一個最酷的螢幕保護程式是一個書呆子宣告。 ...
如何在Windows10中設定白色桌面背景
你的電腦桌面牆紙是你個性的延伸，所以設定一張你喜歡的牆紙是有意義的。許多人使用頂級的牆紙網站來獲取很酷的圖片，有時甚至在幻燈片中設定它們，這樣你就不必只決定一張圖片。 ...
10分鐘內可以學習10個簡單的css程式碼示例
... 下面是幾個簡單的CSS示例，向您展示如何在web頁面上進行一些基本的樣式更改。 ...
css3基本屬性備忘單
... 在你學會了如何用HTML構建靜態網頁之後，是時候去發現如何用CSS來設計它們的樣式並使它們看起來更漂亮了。下面我們的CSS3屬性備忘表可以幫助您做到這一點！它涵蓋了CSS3中您需要...
wordpress中特色縮圖和影象大小的完整指南
...含強大的工具來調整圖片和縮圖的大小，但是你需要知道如何處理它們。 ...
如何在Windows10中設定實時牆紙和動畫桌面背景
... 在本文中，我們將向您展示如何在Windows10上設定實時牆紙。 ...
