CSS background 背景

admin發表於2018-12-03
CSS

紅花也要綠葉配，不但自身要素質過硬，襯托也十分重要。

大家拍照也會刻意找一個合適的背景也是同樣的道理，可見背景的重要性。

網頁佈局實際亦是如此，給元素恰當的設定背景可以有效的提高人性化程度。

背景大致可以分為兩類：

（1）.背景顏色。

（2）.背景圖片。

通過background即可實現設定功能。

一.背景顏色：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:150px;
  height:40px;
  margin:10px;
}
.top{
  background-color:#ccc
}
.bottom{
  background-color:#ccc;
  opacity:0.3;
}
</style>  
</head>
<body>
  <div class="top"></div>
  <div class="bottom"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/150720o3a3df3lp3zzbd3o.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過background-color屬性可以設定元素背景顏色。

（2）.背景可以設定透明度。

上面程式碼設定背景透明有一個特點，那就是不但元素本身透明，它內部元素和文字也會被設定為透明。

這通常是不期望出現的現象，可以直接將background-color屬性值設定為帶有透明度的顏色表示法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:150px;
  height:40px;
  line-height:40px;
  text-align:center;
  margin:10px;
  background-color:RGBA(125,255,158,0.2);
}
</style>  
</head>
<body>
  <div class="top">螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/150744f8vw8a2ilkimfkai.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

CSS中所有的合法顏色值都是被允許的，具體參閱CSS顏色值型別一章節。

特別說明：如果同時規定背景顏色和背景圖片，那麼背景圖片會覆蓋在背景顏色之上。

二.背景圖片：

background是一個複合屬性，類似於大家所熟知的音樂合奏組合。

大家一起協作合奏效果肯定美妙絕倫，單獨一個人出來演奏某一種樂器也能滿足一定程度上的音樂享受。

就上前面的background-color屬性，單獨使用它可以設定元素背景顏色。

background屬性由如下幾個屬性組成：

（1）.background-color

（2）.background-position

（3）.background-size（CSS3）

（4）.background-repeat

（5）.background-origin（CSS3）

（6）.background-clip（CSS3）

（7）.background-attachment

（8）.background-image

下面分別介紹一下每一個屬性的功能。

background-color設定背景顏色，前面已經介紹。

background-position對背景圖片進行定位，具體參閱CSS background-position一章節。

background-size設定背景圖片大小，具體參閱CSS3 background-size一章節。

background-repeat設定背景圖片重複方式，有如下幾個屬性值：

（1）.repeat：預設，規定背景圖片在水平和垂直兩個方位重複。

（2）.repeat-x：規定背景圖片在水平方位重複。

（3）.repeat-y：規定背景圖片在垂直方位重複。

（3）.no-repeat        ：規定背景圖片不重複。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant{
  background-color:green;
  background-image:url(mytest/demo/mybg.png);
  background-position:0px 0px;
  background-repeat:no-repeat;
  width:400px;
  height:300px;
} 
</style>
<script>
window.onload=function(){
  no.onclick=function(){ant.style.backgroundRepeat="no-repeat";}
  x.onclick=function(){ant.style.backgroundRepeat="repeat-x";}
  y.onclick=function(){ant.style.backgroundRepeat="repeat-y";}
  repeat.onclick=function(){ant.style.backgroundRepeat="repeat";}
}
</script>  
</head>
<body>
  <div id="ant"></div>
  <input type="button" id="no" value="no-repeat">
  <input type="button" id="x" value="repeat-x">
  <input type="button" id="y" value="repeat-y">
  <input type="button" id="repeat" value="repeat">
</body>
</html>

點選按鈕可以測試相關屬性值的作用，非常簡單，不多介紹。

特別說明：id屬性值可以直接作為元素物件使用。

background-origin設定背景圖片的原點位置，具體參閱CSS3 background-origin一章節。

background-clip對背景圖片進行修剪裁切，具體參閱CSS3 background-clip一章節。

background-attachment設定背景影像是否固定，屬性值如下：

（1）.scroll：預設值，背景影像會隨著頁面的滾動而滾動。

（2）.fixed：背景圖片保持固定。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant{
  background-color:green;
  width:400px;
  height:300px;
  overflow:auto;
} 
#content{
  margin:0px auto;
  height:600px;
  width:200px;
  background-image:url(mytest/demo/mybg.png);
  background-position:0px 0px;
  background-repeat:no-repeat;
  background-attachment:scroll;
}
</style>
<script>
window.onload=function(){
  scroll.onclick=function(){content.style.backgroundAttachment="scroll";}
  fixed.onclick=function(){content.style.backgroundAttachment="fixed";}
}
</script>  
</head>
<body>
  <div id="ant">
    <div id="content"></div>
  </div>
  <input type="button" id="scroll" value="scroll">
  <input type="button" id="fixed" value="fixed">
</body>
</html>

點選底部按鈕可以演示屬性值的相關效果。

background-images屬性用來規定背景圖片的路徑，格式如下：

[CSS] 純文字檢視 複製程式碼
background-image:url(mytest/demo/mybg.png);

三.background複合寫法：

可以單獨逐項設定背景屬性，也可以將通過background屬性一起設定。

考慮到篇幅問題，關於此屬性的複合寫法在新的一篇文章介紹。

具體參閱background 屬性格式一章節。

相關文章