background學習總結

background

background:red;

background-color:red;
​

基於background的控制,達到能控制雪碧圖的控制?

repeat

/*y軸重複*/

body

​

/*x軸重複*/
body

​

​

background:xpos ypos;

大小

.bg1

寬度保持原圖大小,高度百分之50%
我估計正常使用也是等比縮小或放大,不會像這樣失真的

.bg2

/*在等比不失真的前下,將div裝滿,放不下的地方會隱藏*/
/*這個還是比交常用的方法!!*/

.bg3

contain是將整裝背景全部展示在div 裡,自動調整大小,以能完整展示!!!

位置

雪碧圖-整合

將多個小用一張大圖載入出來,然後通過background-position屬性在正確的位置顯示出來!!
​   background-position: 36px -47px;
後面的兩個引數代表了從哪個位置開始載入這張,不用非常明確的雲記這張雪碧圖的位置,只要在瀏覽器工具裡實時的調整就可以了!!!tip

background-position:bottom left; 

background-position:left top
background-position:left center
background-position:left bottom
background-position:right top
background-position:right center
background-position:center top
background-position:center center
background-position:center bottom
​總的來說就是 left right bottom top center 五個單詞的組合

background復合寫法

​糟糕的程式設計師,或者**壓縮時的寫法,進行識別!!
前面的是大小,後面的position,跟本不要在意.正常自己寫的時候將其標明,以免出錯!!
​background: url(star.png) no-repeat skyblue 100px 100px / 80px 80px scroll;*/

背景的移動?

fixed粘在上面的意思

​

backgruond-attachment:scroll;
​background-attachment:fixed;
​乙個是背景跟著滾動條滾動,
乙個是不跟著滾動條滾動

漸變色?

.bg1

​

控制漸變的位置關係,百分比

background: -o-linear-gradient(left, #f536a6, #d221f8 25%, #d221f8 25%, #be89e8 50%, #be89e8 50%, #1fe07a 75%,#1fe07a 75%, #7bed27 100% );

box-shadow:inset 0 10px 1em #333;

前端學習 background

background可以幫助前端er們豐富元素的背景，讓網頁更加絢爛，是乙個使用頻率很高的屬性。首先，我們會先介紹background color background image background repeat background attachment background position...

background簡寫屬性

在css中有多個屬性用於設定背景樣式，其中 background color 設定背景顏色。background repeat 設定是否以及如何重複背景影象 background position 設定背景影象的起始位置 background attachment 設定背景影象是否固定或者隨著頁面的...

background 線性漸變

background linear gradient direction,color stop1,color stop2,linear gradient to left right top bottom 取值 下述值用來表示漸變的方向，可以使用角度或者關鍵字來設定 順時針方向角度 用角度值指定漸變的...