當前位置:首頁 » 背景圖片 » css3背景圖片漸變
擴展閱讀
清新自然高清圖片 2025-06-18 05:15:11
胃的腳底穴位在哪裡圖片 2025-06-18 05:11:06
春晚有什麼圖片 2025-06-18 05:00:23

css3背景圖片漸變

發布時間: 2025-06-18 00:49:32

⑴ 用css3設置背景漸變之後,還能加背景圖片

可以的,只要把它們用逗號隔開即可,如果你願意,你甚至可以用多張圖片與多個漸變進行復雜的效果疊加。比如下面是兩張圖片錯開位置後放到漸變背景上的例子:


<style>

#ddiv

{

width:480px;height:360px;

background:url(圖片1)no-repeat30px20px,url(圖片2)no-repeat160px180px,-webkit-linear-gradient(top,#966,#8ff)

}

</style>

<divid="ddiv"></div>


⑵ css3中增加了兩種設置調整背景圖片大小的方式,分別是什麼

1 background-size:auto;/* 默認值,不改變背景圖片的高度和寬度 */
2 background-size:100px 50px;/* 第一個值為寬,第二個值為高,當設置一個值時,將其作為圖片寬度來等比縮放 */
3 background-size:10%;/* 0%~100%之間的任何值,將背景圖片寬高按百分比顯示,當設置一個值的時候同也將其作為圖片寬度來等比縮放 */
4 background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */
5 background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

⑶ Css3——background屬性詳解

background :背景。在css裡面作為css屬性一成員,通過該屬性可設置背景圖片、背景顏色、背景圖片截取等樣式。而僅僅一個background又具有多個子屬性。

顏色名稱,如: background-color:red ;
十六進制背景色,如: background-color:#f00; ;
rgb顏色,這里如果是rgba,a表示透明程度,為0全透明,為1為完全不透明,
如: background-color:rgb(255,0,0.3); ;
特殊值:transparent,透明色: background-color:transparent ;

background-image屬性用於為一個元素設置一個或多個背景圖片,多個背景圖片之間以逗號隔開。
一張圖片: background-image: url(img/a.jpg);
多張圖片: background-image: url(img/a.jpg),url(img/b.jpg);
特殊值:none,不顯示背景圖像
background-image: none;

background-repeat 屬性定義背景圖像的重復方式。背景圖像可以沿著水平軸,垂直軸,兩個軸重復,或者根本不重復。
常用的4個值:
repeat:水平和垂直方向都重復圖像, background-repeat: repeat;
repeat-x:水平方向重復圖像
repeat-y:垂直方向重復圖像
no-repeat:圖像不重復

規定背景圖像是否固定或者隨著頁面的其餘部分滾動。
scroll:背景圖像相對於頁面不動,會隨著網頁的滾動而移動,默認
fixed:背景圖像相對於瀏覽器窗口不動,內容滾動的時候背景圖像不動
background-attachment: fixed;

第一個值為橫坐標,第二個值為縱坐標。默認值為:(0% 0%)。
如果只指定了一個值,該值將用於橫坐標。縱坐標將默認為50%。
例如: background-position: right; 代表背景圖右側,垂直方向居中的位置。
百分比位置,如:background-position: 20% 20%;
具體像素位置, 如:background-position: 20px 20px;

background-size 設置背景圖片大小。圖片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

單張圖片的背景大小可以使用以下三種方法中的一種來規定:

當通過寬度和高度值來設定尺寸時,你可以提供一或者兩個數值:

每個值可以是<length>, 是 <percentage>, 或者 [auto] 。

示例:

為了設定超過一張以上的圖片尺寸時,需要提供多項數值,它們通過逗號分隔。

CSS部分 背景圖片解析度為427*640

分別給box的background-size屬性添加不同的屬性值,會產生不同的效果。

1、長度 :可以用px、em、rem等指定背景圖片大小,不能為負值。

background-clip 裁剪,通常和background-origin一起使用,決定設置元素的背景(背景圖片或顏色)是否顯示。
註:background-clip只是將背景和背景色粗暴的裁剪。
該屬性有四個值
border-box
背景延伸至邊框外沿(但是在邊框下層)。 background-origin: border-box;

background-origin 規定了指定背景圖片[ background-image ] 屬性的原點位置的背景相對區域.
border-box
背景圖片的擺放以border區域為參考
padding-box
背景圖片的擺放以padding區域為參考
content-box
背景圖片的擺放以content區域為參考

樣式:
先看一下background-origin屬性。

先看一下background-clip屬性。

這就印證了background-clip只是將背景和背景色粗暴的裁剪。

好的,以上就是我對background的各個屬性的理解,實際應用時可能會有部分出入,我們只需要掌握background-color、background-image、background-repeat、background-position、background-size這幾個常用的屬性即可。
歡迎大家一起交流,討論。