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

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

一. css背景屬性

#1. CSS的background屬性及CSS3的背景圖片設置總結分享

在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屬性基礎介紹

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

二. css背景顏色

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

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

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

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

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

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

三. css背景圖片

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

目前很流行的一種網頁形式就是滿屏大圖，本文將以最簡單的方式來實現效果。用到了CSS 屬性background-size ,無需javascript。

2. 關於CSS3多重背景及背景圖片裁剪和定位以及尺寸的具體詳解

CSS3之前我們可以對背景加上一張圖片，CSS3允許我們在一個元素上添加多個圖片，多重背景可以把多個圖片資源添加到background屬性上，用逗號隔開 

然後用background-position把他們定位到你想要的位置

3. css全螢幕背景圖片設定django載入圖片路徑詳細說明

這篇介紹的是css全螢幕背景圖片設定django載入圖片路徑詳細說明，小編覺得蠻不錯的，也給大家做個參考。

4. 介紹兩種利用CSS實現背景圖片透明而文字不透明的特效代碼

方法一(毛玻璃效果)：背景圖+ 偽類+ flite: blur(3px)

方法二(半透明效果)：背景圖+ 定位+ background:rgba(255,255,255,0.3)

CSS實作背景圖片透明，文字不透明效果的兩種方法

專案中常會用到背景圖上放一些文字介紹，這裡介紹兩種技術來實現背景圖片透明，文字不透明效果，記錄一下，方便日後學習。

css中背景屬性相關問答

1. css3 - css背景色不填滿邊框，css怎麼寫？

2. css3 - css背景圖片高度百分百，寬度保持比例怎麼做？

3. css3 - css背景自適應問題

4. css3 - 如何模糊網頁CSS背景圖高斯模糊且全螢幕顯示

【相關推薦】

1. 免費css線上影片教學

2. php.cn獨孤九賤（2） －css影片教學

3. 彈指間學會CSS影片教學css背景

以上是css中背景（屬性、顏色、圖片）設定總結分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！