背景

時間 2019-11-11

標籤背景简体版

原文原文鏈接

一、背景顏色

二、漸變色背景

三、多背景疊加

四、背景圖片和屬性（雪碧圖）

五、base64和性能優化

六、多分辨率適配

一、背景顏色

1）直接用顏色名或顏色值

　　background: red;

2）hsl(色相，飽和度，亮度)

　　色相是0到360的角度。飽和度是0到100%。亮度100%是白色，0是黑色，50%通常是純色

　　hsl(0,100%,50%)

3) hsla(色相，飽和度，亮度, 透明度)

4) rgb(255, 0, 0);

5) rgba(255, 0, 0, 0.3)

2)、漸變色背景

<style>
.c2 {
　　height: 90px;
　　background: linear-gradient(to right,red,green)
　　/* background: -webkit-linear-gradient(left,red,green) */
}
</style>
<body>
　　<div class="c2"></div>
</body>

從左到右，從白色逐漸到綠色。上面是新的寫法，下面是老的寫法。通常狀況下咱們是用角度web

background: linear-gradient(0deg,red,green)

0deg是從下到上，90deg是從左往右，180從上到下，270deg是從右往左。除了從角度上寫，還能夠增長顏色

background: linear-gradient(135deg,red 0,green 50%, blue 100%)

顏色後面的從哪開始，還能夠添加更多的顏色

background: linear-gradient(135deg,red 0,green 10%, yellow 50%, blue 100%)

那麼一樣咱們也能夠去設置透明度，這樣有些有背景，有些沒有背景，若是這個背景足夠窄的話，就能夠畫不少有趣的圖形。

background: linear-gradient(135deg,transparent 0,transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);

這裏是135的角度。0到49%都是透明的，到49.5%的地方既是透明的又是綠色。到50.5%的時候也是既是透明的，又是綠色，後面又是透明的，至關於在49.5到50.5的地方畫了一根綠線，先後都是透明。

那麼這個有什麼用呢？

咱們再加一個尺寸，background-size: 30px 30px;

<style>
.c2 {
　　height: 90px;
　　background: linear-gradient(135deg,transparent 0,transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);
　　background-size: 30px 30px;
}
</style>
<body>
　　<div class="c2"></div>
</body>

三、多背景疊加

這個時候咱們再寫一條

<style>
.c2 {
　　height: 90px;
　　background: linear-gradient(90deg,transparent 0,transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
linear-gradient(45deg,transparent 0,transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
　　background-size: 30px 30px;
}
</style>
<body>
　　<div class="c2"></div>
</body>

兩個linear-gradient是同樣的，只不過角度和顏色變了一下。就實現了這樣的網格線。

四、雪碧圖

<style>
.c1{
　　height: 90px;
　　background: red url(./text.png)
}
</style>
<body>
　　<div class="c1"></div>
</body>

咱們發現紅色背景沒出現，是由於背景圖是不透明的平鋪的。將高度設大一點，會發現橫向縱向都是平鋪的。有時候平鋪並非咱們想要的結果。

能夠設置background-repeat:no-repeat。或者水平方向平鋪background-repeat:repeat-x。或者垂直方向平鋪background-repeat:repeat-y。

若是我想背景圖的位置在中間，能夠設置background-position:center center。水平方向中間，垂直方向中間。也能夠指定像素，background-position: 20px 30px。水平方向20px,垂直方向30px。

背景圖的大小也是能夠控制的，設置background-size:100px 50px。寬100px,高40px

雪碧圖demo

<style>
.c2{
　　width: 40px;
　　height: 40px;
　　background: url(./text.png) no-repeat;
　　background-position: -133px -32px
}
</style>
<body>
　　<div class="c2"></div>
</body>

固定好高度，寬度，背景不平鋪。將背景圖片的位置進行移動，直到移動到出現本身到圖標的位置。

多分辨率適配：一張圖在電腦比較清晰，在手機比較模糊，能夠將圖片作的，再設置大小，縮小，用多個像素填充

base64和性能優化：一張圖片能夠轉爲base64展示，這樣請求是減小了，可是文件體積增大了，並且瀏覽器須要解碼。消耗了性能。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。