CSS(一) CSS背景

時間 2019-11-08

標籤 css 背景欄目 CSS 简体版

原文原文鏈接

CSS背景css

---------- 既有css3以前的用法也有css3的用法，沒有區分出來哈，我想要速成就沒有管這個。html

CSS設置背景顏色：屬性background-color，這個屬性的做用範圍是，background-color 屬性爲元素設置一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。若是邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。這個器是很關鍵的。驗證以下：margin是沒有效果的。css3

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/backgroud-color.css" />
	</head>
	<body>
		<div id="div1"><p>this is p</p></div>
		<div id="div2"><p>this is p</p></div>
		<div id="div3"><p>this is p</p></div>
	</body>
</html>

//css內容
p {
	margin: 0px;
}

div {
	background-color: red;
}
#div2 {
	padding: 10px;
}

#div3 {
	padding: 10px;
	border-style: solid; //設置邊框 
	border-width: 5px; //設置大小
	border-color: transparent; //設置透明
}

CSS 內邊距屬性

屬性	描述
padding	簡寫屬性。做用是在一個聲明中設置元素的所內邊距屬性。
padding-bottom	設置元素的下內邊距。
padding-left	設置元素的左內邊距。
padding-right	設置元素的右內邊距。
padding-top	設置元素的上內邊距。

CSS 邊框屬性

屬性	描述
border	簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
border-style	用於設置元素全部邊框的樣式，或者單獨地爲各邊設置邊框樣式。
border-width	簡寫屬性，用於爲元素的全部邊框設置寬度，或者單獨地爲各邊邊框設置寬度。
border-color	簡寫屬性，設置元素的全部邊框中可見部分的顏色，或爲 4 個邊分別設置顏色。
border-bottom	簡寫屬性，用於把下邊框的全部屬性設置到一個聲明中。
border-bottom-color	設置元素的下邊框的顏色。
border-bottom-style	設置元素的下邊框的樣式。
border-bottom-width	設置元素的下邊框的寬度。
border-left	簡寫屬性，用於把左邊框的全部屬性設置到一個聲明中。
border-left-color	設置元素的左邊框的顏色。
border-left-style	設置元素的左邊框的樣式。
border-left-width	設置元素的左邊框的寬度。
border-right	簡寫屬性，用於把右邊框的全部屬性設置到一個聲明中。
border-right-color	設置元素的右邊框的顏色。
border-right-style	設置元素的右邊框的樣式。
border-right-width	設置元素的右邊框的寬度。
border-top	簡寫屬性，用於把上邊框的全部屬性設置到一個聲明中。
border-top-color	設置元素的上邊框的顏色。
border-top-style	設置元素的上邊框的樣式。
border-top-width	設置元素的上邊框的寬度。

CSS 外邊距屬性

屬性	描述
margin	簡寫屬性。在一個聲明中設置全部外邊距屬性。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距。
margin-right	設置元素的右外邊距。
margin-top	設置元素的上外邊距。

CSS設置背景圖片：this

CSS 背景屬性（Background）

屬性	描述	CSS
background	在一個聲明中設置全部的背景屬性。	1
background-attachment	設置背景圖像是否固定或者隨着頁面的其他部分滾動。	1
background-color	設置元素的背景顏色。	1
background-image	設置元素的背景圖像。	1
background-position	設置背景圖像的開始位置。	1
background-repeat	設置是否及如何重複背景圖像。	1
background-clip	規定背景的繪製區域。	3
background-origin	規定背景圖片的定位區域。	3
background-size	規定背景圖片的尺寸。	3

早期只能這樣使用，這個時候設置圖片的時候有兩個問題，圖片小和圖片太大怎麼設置。url

過小的圖片只能從設置背景圖像是否及如何重複入手，太大的圖片只有設置圖片的起始位置入手。到了css3事後，咱們對圖片的大小實際上是能夠控制的。spa

body {
	background-image: url(../img/56e13c46c23ed.jpg);
	background-repeat:no-repeat ;
	background-size:cover;//適應比例的縮放
    background-repeat:repeat-y;
    background-attachment: fixed;//固定了背景圖片，就算圖片沒有圖片長也不會出問題。
}

最後說一個新特性：CSS3能夠使用多張背景圖片，有些圖片的陰影就是這樣製做的：code

body
{ 
background-image:url(xxx.gif),url(xxxx_2.gif);
}

試試當一個頁面來操做一下：htm

博客並不能寫css文件,圖片

1. CSS的背景
2. CSS 背景
3. CSS背景
4. CSS Backgrounds（背景）
5. 【CSS學習】--- 背景
6. css 背景測試
7. CSS - 背景圖片
8. css條紋背景
9. CSS漸變背景
10. CSS背景處理
更多相關文章...
• ionic 背景層 - ionic 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• RxJava操作符（一）Creating Observables
• Kotlin學習（一）基本語法

相關標籤/搜索

每日一句

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