CSS3-08-CSS3背景與應用
title: CSS3背景與應用
date: 2022-12-07 21:53:43
tags: css3
categories: [Front,css3]
description: CSS3背景與應用
password: 19491001
CSS3背景與應用
CSS 可以新增背景顏色和背景圖片，以及來進行圖片設定。
| background-color | 背景顏色 |
|---|---|
| background-image | 背景圖片地址 |
| background-repeat | 是否平鋪 |
| background-position | 背景位置 |
| background-attachment | 背景固定還是滾動 |
| 背景的合寫（複合屬性） | |
| background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 |
背景圖片(image)
語法：
background-image : none | url (url)
引數：
none : 無背景圖（預設的）
url : 使用絕對或相對地址指定背景影象
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。
快捷鍵bgi+tab，會出現background-image這個屬性的。
由於這個圖沒有300寬，因此，有一個平鋪的效果。
可以看到，預設就是repeat，平鋪的。
如圖，盒子是外邊框的大小，而圖片是裡面框的大小，因此，就平鋪了。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
引數：
repeat : 背景影象在縱向和橫向上平鋪（預設的）
no-repeat : 背景影象不平鋪
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。
預設是平鋪的，這裡改成no-repeat，不平鋪。
repeat-x是橫向平鋪。
repeat-y，縱向平鋪。
背景位置(position)
語法：
background-position : length || length
background-position : position || position
引數：
length : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱長度單位
position : top | center | bottom | left | center | right
說明：
設定或檢索物件的背景影象位置。必須先指定background-image屬性。預設值為：(0% 0%)。
如果只指定了一個值，該值將用於橫座標。縱座標將預設為50%。第二個值將用於縱座標。
注意：
- position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。
- 如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。
實際工作用的最多的，就是背景圖片居中對齊了。
預設是left和top，就是左上角。
右上角。
就是屬性值，bottom和right，這個誰在前，誰在後無所謂。
水平中間，垂直中間。
只寫一個方位名詞，另外一個預設就是居中的。
網頁中的座標。
我們也可以指定圖片的精確座標位置。
使用精確座標。
如果使用純方位名字的話，那麼屬性值的前後沒有順序的。
對於精確定位和混搭，屬性值都是有順序的，前面是x，後面是y。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ccc;
}
div {
width: 400px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: no-repeat;
/* 1.利用方位名詞 top bottom 來更改背景圖片位置 */
/*background-position: left top; 預設的是 左上角 */
/*background-position: bottom right ; 方位名詞沒有順序，誰在前都可以 */
/* background-position: center center ; */
/* background-position: left; 如果方位名詞只寫一個，另外一個預設為center */
/* background-position: 10px 30px;
2. 精切單位 第一值一定是x座標 第二個值一定是y座標 */
/* 3. 混搭 */
background-position: center 10px ;
/* center 10px 水平居中的 垂直是 10px
10px center 水平10px 垂直是 居中 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
案例-魔獸背景圖片
圖片大小。
這就是圖是外邊這麼大，但是瀏覽器確只有裡面這麼寬。預設是左上角對齊的，因此，就是圖中顯示的樣子了。
我們想要將圖片居中對齊。注意藍色框是圖片。裡面的是瀏覽器，也就是螢幕的寬和高。
這就和官網的頁面幾乎一致了。
圖往上走了。
這就是大背景圖的做法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
background-image: url(images/ms.jpg);
background-repeat: no-repeat;
/* 背景圖片的位置 水平居中 垂直靠上就可以了 */
background-position: center -25px;
}
</style>
</head>
<body>
</body>
</html>
FW是Macromedia公司推出的結合photoshop和coreldraw的一款圖形影象處理軟體。與dreamweaver、flash稱為網頁三劍客。是網頁設計的必備軟體。
背景附著（固定）
語法：
background-attachment : scroll | fixed
引數：
scroll : 背景影象是隨物件內容滾動
fixed : 背景影象固定
說明：
設定或檢索背景影象是隨物件內容滾動還是固定的。
現在拉滾動條，圖片就上去了。
預設是scroll的，就是圖片會上去。
此時拉動滾動條，只有文字會動，背景圖片是不動的。
這個就叫做背景固定。
背景簡寫
background屬性的值的書寫順序官方並沒有強制標準的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景位置，水平是center，垂直是100px。
注意，最後的center 100px這個背景位置是一體的，x，y座標，他倆不能夠分開的。然後其它的部分，位置順序不是嚴格規定的。
背景透明(CSS3)
CSS3支援背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最後一個引數是alpha 透明度 取值範圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不受影響。
這是之前的內容的顏色半透明。
如上，這是內容的半透明。
我們的盒子，也是可以半透明的，也就是背景半透明的。
例如，這裡就是半透明的。
看著圖有點偏，原因就是圖很大。沒有那麼大的瀏覽器的。預設圖是在左上角對齊的。
此時圖片就居中了。
一個div盒子。
現在想要這個盒子能夠半透明的。
此時就是半透明的了。
背景縮放(CSS3)
通過background-size設定背景圖片的尺寸，就像我們設定img的尺寸一樣，在移動Web開發中做螢幕適配應用非常廣泛。
其引數設定如下：
a) 可以設定長度單位(px)或百分比（設定百分比時，參照盒子的寬高）
b) 設定為cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢位部分則會被隱藏。我們平時用的cover 最多
c) 設定為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
我們知道，圖片大小是固定的，那麼圖片作為盒子的背景圖片的時候，能否跟著進行縮放呢？
在css3新特性中是可以支援的。
background-size，用來設定背景圖片的尺寸。
img是插入圖片，不是背景圖片。
儘量不要寬和高一起改，因為不能很好的控制比例，因此，給定一個高或者寬即可，能夠自動進行等比例縮放的。
還可以使用百分比的形式。
因此，可以使用精確單位，也可以使用百分比的方式。
前面的背景縮放，沒有將div這個盒子充滿。
可以手動的指定背景圖片的寬高，充滿盒子。
但是這樣寫，不方便，而且圖片也失真了。
可以看到圖片也沒有失去比例。
縮放的方式是這樣的，圖片往下放大，高度和盒子一樣高了，但是寬度還沒有到，因此，繼續等比例的放大。
直到寬度和盒子一樣大小為止。
由於是等比例縮放的，所以，此時下面多出來的部分就被隱藏了。
圖片正常比例顯示，但是盒子有一部分漏出了。
contain是這樣，等比例放大，然後首先發現高度滿足了盒子的高度了，此時圖片就不會再進行縮放了。因此，寬度還沒有滿足盒子的寬度，因此，背景色就會漏出。
如果圖片是這樣的，那麼就是首先寬度滿足了盒子了，那麼此時高度就不會再變了，圖片不會再進行縮放了。此時低下背景色就會漏出了。
我們平時使用cover較多。
多背景(CSS3)
以逗號分隔可以設定多背景，可用於自適應佈局 做法就是 用逗號隔開就好了。
- 一個元素可以設定多重背景影象。
- 每組屬性間使用逗號分隔。
- 如果設定的多重背景圖之間存在著交集（即存在著重疊關係），前面的背景圖會覆蓋在後面的背景圖之上。
- 為了避免背景色將影象蓋住，背景色通常都定義在最後一組上，
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
我們是否可以在一個盒子上放置多張圖片呢，如圖，左上角放一張圖片，右下角放一張圖片。
在css3中，是支援的。
放置兩張背景圖片，此時盒子沒有背景顏色呢，背景顏色是有講究的。
此時兩張背景圖片是有交集的。有重疊的。
前面的將後面的覆蓋了。
現在背景顏色放在了第一組上。
背景圖片都沒有了。因此，要求，背景顏色，需要放在最後一組上。
凹凸文字
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微軟雅黑";
}
div:first-child {
/* text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色; */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
/* text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色; */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
文字陰影也是可以新增多個的。
現在文字和背景顏色一樣了，給文字新增凸起效果。
上面是亮光效果。下面是影子效果。
此時文字看不到了。
用滑鼠滑動，能夠看到文字。
文字的陰影，也是可以新增多個的，也是使用逗號分隔的。多陰影。
上面是陰影是白色，下面陰影是黑色。
這樣更加具有立體感了。
上邊，左邊是白色的。右邊下邊是黑色的。
凹下去的。
這就是通過文字陰影來實現的。
導航欄案例-王者榮耀導航欄
圖中這個導航欄效果我們可以做。
滑鼠放到連結上，要變換背景。
寬，高，手工通過軟體去量的。
a是行內元素，對寬高沒有效果的。
因此，我們可以將其轉為塊級元素。
但是現在每個佔一行了。
因此，可以使用行內塊元素。
我們可以讓a的行高等於盒子的高度，這樣文字就垂直居中了。
實際上是讓文字內容的行高（行間距）等於a這個盒子的高。
注意，使文字在盒子中垂直居中，前提是這個盒子裡只有一行文字，如果是多行文字就不行了。
這裡面的下劃線如何去掉呢？下面說明。
文字的裝飾
text-decoration 通常我們用於給連結修改裝飾效果
| 值 | 描述 |
|---|---|
| none | 預設。定義標準的文字。 |
| underline | 定義文字下的一條線。下劃線 也是我們連結自帶的 |
| overline | 定義文字上的一條線。 |
| line-through | 定義穿過文字下的一條線。 |
使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。
注意，只有連結的文字，預設是有下劃線的，其他的文字預設都是none的，也就是標準文字沒有線的。
取消背景色。
此時滑鼠放上去，就有背景了。