首頁 > 文章 > web前端 > css中背景（屬性、顏色、圖片）設定總結分享

css中背景（屬性、顏色、圖片）設定總結分享

零下一度原創: 2017-06-01 13:43:597949瀏覽

本篇文章是關於css背景的一些小常識，詳細介紹了css背景屬性、css背景顏色、css背景圖片。需要的朋友可以參考下

一. css背景屬性

在css中，共有如下幾個background屬性。

background    在一个声明中设置所有的背景属性。
background-attachment    设置背景图像是否固定或者随着页面的其余部分滚动。    
background-color    设置元素的背景颜色。 
background-image    设置元素的背景图像。
background-position    设置背景图像的开始位置。
background-repeat    设置是否及如何重复背景图像。   
background-clip    规定背景的绘制区域。
background-origin    规定背景图片的定位区域。
background-size    规定背景图片的尺寸。

2. 必須掌握的CSS知識-background屬性

#注意：background-color不能繼承，其預設值是transparent。 transparent 有「透明」之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

3. css背景固定樣式background-attachment屬性基礎介紹

css中背景（屬性、顏色、圖片）設定總結分享

#background-attachment 屬性只有2個屬性值。 scroll表示背景圖像隨物件滾動而滾動，是預設選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨捲軸滾動。

二. css背景顏色

1. 使用CSS巧妙地製作背景色漸層動畫實例

正文從這裡開始。有的時候，嗯，應該說某些特定場合，我們可能需要下面這樣的動畫效果，漸變+ animation ：

css中背景（屬性、顏色、圖片）設定總結分享

2. 使用css3實現背景漸層方法

在沒有了解css也可以做背景漸層以前，我都是透過PS一張背景漸層的圖片來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，以下是一些css3做背景漸變的方法

3. CSS3中使用RGBa來調節透明度的範例說明

在CSS3 中，增加了一個opacity 屬性，允許開發者設定元素的透明度，現在opacity 已被主流的現代瀏覽器支持，但opacity 會把被設定的元素及其子元素同時設定為同一個透明度，這樣的透明規則相當不靈活，在實際開發中往往也是會遇到很多麻煩。其實，在 CSS3 中還有另一個顏色透明解決方案 —— RGBa 。相對於 opacity ，RGBa 可以在單一元素上設定透明度，而不影響其子元素，只是 RGBa 的瀏覽器支援度並沒有 opacity 的廣泛，因此相對較少引起開發者註意。

三. css背景圖片

1. CSS實作響應式全螢幕背景圖

css中背景（屬性、顏色、圖片）設定總結分享