css 背景和漸變

background 背景

所有背景屬性都不能繼承

在CSS2.1里，background屬性的簡寫方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position

CSS3開始，又增加了3個新的屬性值
注意：反斜杠可以在支持這種寫法的瀏覽器里在position后面接著寫background-size

background: [background-color] [background-image] [background-repeat][background-attachment] [background-position] / [ background-size][background-origin] [background-clip];

• background-color 背景色
  不能繼承，其默認值是 transparent

• background-image 背景圖片
  默認值是 none

可設置多幅背景圖片 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

• background-repeat 背景圖片平鋪
  其值可為 （ repeat | no-repeat | repeat-x | repeat-y ）

默認為repeat

• background-attachment 背景關聯

  • 如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

  • 其值可為 （ fixed | scroll ）

  • 默認值是 scroll，背景會隨文檔滾動

  • 可以聲明圖像相對于可視區是固定的（fixed）

• background-position 背景定位

  • 不超過兩個關鍵字，水平方向和垂直方向

  • 只出現一個關鍵字，另一個認為是center

  • 其值可為 （ top，bottom，left，right，center，長度值，百分數值 ）

  • 默認為 0% 0%，即top left ，元素內邊距區的左上角(padding-box)

• background-size 背景圖像尺寸

  • 默認值auto，寬度和高度，只有一個值，第二個被設置為auto

  • 其值可為 （ 長度值，百分數值，cover ，contain ）

    • cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

    • contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域

• background-origin 定位中心點

  • 注意：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果

  • 默認值 padding-box

  • 其值可為 （ padding-box | border-box | content-box ）

• background-clip 背景的繪制區域

  • 默認值 border-box ，背景被裁剪到邊框盒

  • 其值可為 （ border-box | padding-box | content-box ）

背景定位

• background-position 擴展語法

  > 允許我們指定背景圖片`距離任意角的偏移量`,`在偏移量前面指定關鍵字` background-position: right 20px bottom 10px;

需要提供一個合適的回退方案,在不支持 background-position 擴展語法的瀏覽器中,背景圖片會緊 貼在左上角(背景圖片的默認位置) background: url(code-pirate.svg) no-repeat bottom right #58a; background-position: right 20px bottom 10px;

• background-origin

  • 問題：偏移量與容器的內邊距一致

  • 默認情況下,background-position 是以 padding box 為準的

  • 如果把background-origin值改成 content-box,則在 background-position 屬 性中使用的邊角關鍵字將會以內容區的邊緣作為基準(也就是說,此時背景 圖片距離邊角的偏移量就跟內邊距保持一致了)

  padding: 10px; background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ background-origin: content-box;

• calc()

  background: url("code-pirate.svg") no-repeat; background-position: calc(100% - 20px) calc(100% - 10px);

偽隨機背景

重復平鋪的圖案有一定規律可循，如下面代碼

background: linear-gradient(90deg,#fb3 15%, #655 0, #655 40%,#ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0); background-size: 80px 100%;

每80px（即 background-size 的值）重復一次

方法：

• 把平鋪間距最大的貼片安排在最頂層
  仍然可以看出圖案每隔 240px 就會重復一次,

貼片（多層漸變合成的最終圖案中可感知的重復單元）的尺寸實際上就是所有 background-size 的最小公倍數

background: hsl(20, 40%, 90%); background-image:linear-gradient(90deg, #fb3 10px, transparent 0),linear-gradient(90deg, #ab4 20px, transparent 0),linear-gradient(90deg, #655 20px, transparent 0); background-size: 80px 100%, 60px 100%, 40px 100%;

• 把貼片的尺寸最大化
  “蟬原則”：數字最好是“相對質數”，在這種情況下，它們的最小公倍數就是它們的乘積

要達成相對質數，最簡單的辦法就是盡量選擇質數，因為質數跟其他任意數字都是相對質數

gradient 漸變

• linear-gradient 線性漸變

語法 ： background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 標準的語法,必須放最后 */ + direction/angle 方向或角度- direction 使用方向+ 預定義方向 left,top等+ 可為起始方向 (left 從左到右 ) | (left,top 對角)+ 可定義到達方向 - 使用 to 表示 (to right) | (to right bottom ) - angle 使用角度* 角度是指水平線和漸變線之間的角度，逆時針方向計算* 0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變 + 至少定義兩種顏色結點(起點色，中止色)- 設置透明度可為 rgba() - 可指定起止色位置，百分比或長度值 + (red 30%,blue 50%) ，則30%-50%間是兩種顏色的漸變，其余部分為實色+ 如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設置為它前面所有色標位置值的最大值 background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);等同于：background: linear-gradient(#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

• repeating-linear-gradient 重復的線性漸變

  • 適用于斜向條紋

  • 為這些長度是直接在漸變軸上進行度量的，直接代表了條紋自身的寬度

  • 不論條紋角度如何，在創建雙色條紋時都需要四個色標

    background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0); background-size: 42.426406871px 42.426406871px;等同于：background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);

  • 同色系條紋（明亮度有差異）

    主色調和淺色變體組成 方法是：把最深的顏色指定為背景色，同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋 修改時，只需改動背景色background: #58a; background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);

• radial-gradient 徑向漸變

語法：background: radial-gradient(position, shape size, start-color, ..., last-color);

• repeating-radial-gradient 重復的徑向漸變

  background-image: repeating-radial-gradient(red,green 40px, orange 80px);

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的css 背景和渐变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。