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

來源:互聯網
上載者:User
本篇文章是關於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背景

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.