『壹』 web如何在盒子裡面放背景圖片
1、web在盒子裡面放背景圖片如下：打開HBuilder開發軟體並陵纖在Web項目中創建一個新的靜態頁面。
2、將三個div元素插入body元素並將其類設置舉汪高為AA，BB和CC。
3、預覽靜態頁面，您可以看到頁面效果，即中上層和下層。正尺
4、分別設置AA，BB和CC三個類的樣式屬性，包括寬度，高度和背景顏色。
5、設置body元素樣式屬性。
6、分別添加字體的垂直分布。
『貳』 前端零基礎入門（七）：基礎css樣式之background
在網頁設計中，圖片和文字是構建頁面內容的核心元素。然而，與文字可以直接嵌入HTML標簽顯示不同，圖片需要通過特定方式引用到頁面中。通常，有兩種主要的方法來引用圖片：一種是使用 img 標簽直接插入圖片；另一種是採用背景（background）技術，後者在本文中將進行深入探討。
為了在網頁中展示圖片，我們通常有兩種選擇：使用 img 標簽或背景技術。本文將著重介紹後一種方法——背景樣式（background），它允許我們以更靈活的方式定製頁面的外觀。
網頁元素大致可分為三類：內容、元素（如邊框、滾動條）和背景。內容包括文字、圖片等可選擇的對象，元素是盒子的外觀，如邊框和滾動條，而背景則包含背景顏色和背景圖片。
要添加背景顏色，只需在 HTML 元素（如 div）中應用 CSS 樣式即可。例如，以下代碼可在頁面上創建一個寬度和高度均為 100 像素的紅色矩形： <div style="width: 100px; height: 100px; background-color: red;"></div>，運行後會顯示如下的紅色矩形。
在 CSS 樣式中，`background-color` 屬性可設置顏色，顏色可以通過多種方式描述，具體細節可參閱相關文檔，這里不再贅述。
今天討論的背景樣式不僅限於顏色，還包括了一系列與背景相關且從簡單到復雜的樣式。這些樣式包括但不限於背景顏色、背景圖片、背景重復和背景位置。
`background-color` 是一種復合樣式，它允許設置幾乎所有與背景相關的樣式，如顏色、圖片、重復方式和位置。
`background-image` 則專門用於引入背景圖片。通過使用 `url` 方法，可以將圖片插入背景中，從而在頁面上顯示圖片背景。例如：<div style="background-image: url('image.jpg');"></div>，這將顯示名為 'image.jpg' 的圖片作為背景。
調整盒子大小時，可以清晰地看到背景圖片的重復效果。為了更清楚地展示，可以使用對比明顯的較小圖片，並在盒子背景中應用，這樣可以清楚地看到圖片的重復。
在使用背景圖片時，經常需要控制其是否平鋪。為此，可以使用 `background-repeat` 屬性，它接受的值包括 'no-repeat'（不平鋪）、'repeat-x'（水平平鋪）和 'repeat-y'（垂直平鋪）。
為了控制背景圖片的位置，可以使用 `background-position` 屬性。這允許指定圖片在盒子中的水平和垂直位置，通過 'left'、'center'、'right'、'top'、'center' 和 'bottom' 關鍵字來設置。如果需要精確控制位置，可以使用像素值。
若要調整背景圖片的大小以適應盒子的尺寸，可以使用 `background-size` 屬性，該屬性允許設置圖片的寬度和高度，或者使用百分比和關鍵字 'contain' 或 'cover' 來調整大小。
這些背景樣式可以統一在復合樣式 `background` 中，如 <div style="background: red url('image.jpg') no-repeat center top / cover; background-size: 300px 100px;"></div>，其中顏色、圖片、重復方式、位置和大小都被集中設置。
總結來說，背景樣式提供了豐富的方式來自定義網頁元素的背景，從顏色到圖片、重復和位置，以及大小的控制，使頁面設計更加靈活和個性化。
『叄』 background-repeat屬性值
background-repeat屬性默認值為（）[多選題]*background-repeat屬性默認值枝帆為（）[多選題]*
數字0
完全亂搭畝透明(正嘩森確答案)
數字1
完全不透明(正確答案)
<pstyle="text-align:center">CSS--background系列屬性
css2.1中，顏色的表示方法有三種：（1）單詞；（2）rgb表示法（十進製表示法）；（3）十六進製表示法。
能夠用英語單詞來表述的顏色，都是簡單殲橡顏色。
紅色：background-color:red;
紅色：background-color：碧李rgb（255,0,0）；
rgb（red、green、blue）表示三原色「紅」「綠」「藍」。光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色。
用逗號隔開r，g，b的值，每個值的取值范圍是0~255，一共256個值。
如果此項的值是255，那麼就說明是純色：
綠色：background-color：rgb（0,255，0）
藍色：background-color：rgb（0,0,255）
黑色：background-color：rgb（0，0，0）
白色：background-color：rgb（255,255,255）
顏色可以疊加，比如黃色就是紅色和黃色的疊加：
黃色：background-color：rgb（255,255,0）
紫色：background-color：rgb（255,0，255）
青色：background-color：rgb（0,255,255）
紅色：background-color：#ff0000；
所有用#開頭的值，都是16進制的。
#ff0000（ff表示r，00表示g，00表示b）
16進製表示法和rgb類似，也是兩位兩位的看，但是沒有逗號隔開。
上述紅色表示法中：ff就是10進制的255,00就是十進制的0，所以#ff0000相當於（255,0,0）
十六進制對照表：
任何一種十六進製表示法都能夠換算成rgb表示法。也就是說，兩個表示法能表示的顏色數量一樣多，十六進制能夠簡化成3位，所有#rrggbb的形式，都可以寫成#rgb；
比如，上述的紅色可以寫成background-color：#f00；
但是，如果要採用簡化的方法，必須滿足rrggbb格式才行。
幾個特殊的要記住：
黑：#000
白：#fff
紅：#f00
灰：#333
深灰：#222
淺灰：#ccc
background-image屬性用於給盒子加上背景圖片：
background-image：url（images/1.jpg）
url（）表示網址。、
images/1.jpg就是相對路徑。
背景會默認循環，平鋪滿整個盒子，padding的區域也會有背景圖。
background-repeat屬性用來設置背景圖是否重復以及重復方式。
「repeat」表示「重復」。
默認為鋪滿，不用設置。
不重復：background-repeat：no-repeat；
橫向重復：background-repeat：repeat-x；
縱向重復：background-repeat：repeat-y；
background-position：背景定位屬性。
格式：background-position：向右移動量（100px）向下移動量（200px）
向上向左移只需把移動量改成負數即可。
css精靈又叫「css雪碧」技術，是一種css圖像拼合技術，該氏慧旁方法是將小圖標和圖像合並到一張圖上，然後利用css背景定位來顯示需要顯示的圖片部分。
css精靈的優點，就是減少了http請求。比如4張小圖片，原本需要4個http請求。但是用了css精靈，小圖片變為了一張圖，http請求只有1個了。
background-position：描述左右的詞描述上下的詞；
比如：background-position：rightbottom：（右下角）
background-position：centercenter；（居中）
背景固定屬性。
格式：background-attachment：fixed；
背景就會被固定住，不會被滾動條滾走。
background屬性和border一樣，是一個綜合屬性：
background：rerl（1.jpg）no-repeat100px100pxfixed；
等價於：
background-color：red；
background-image：url（1.jpg）；
background-repeat：no-repeat；
background-position：100px100px；
background-attachment：fixed；
可以任意省略部分：
background：red；
background-repeat:repeat這個在CSS里是什麼意思意思是當盒子的大小大於一張背景圖得大小時敏做譽，剩餘空白的地方要不套繼續橋段用這張圖片去胡咐填充，repeat就是重復填充，no-repeat則只使用一次圖片
background--repeat屬性1、首先選擇新建一個基本的網頁，握侍在這個網頁上面進行代碼的修改。
2、主體內容，h1如何在水辯皮則平方向重復背景圖像/h1。
3、這個style語句就讓自己進行了兩個屬性的設定。一個就是網頁的背景圖像，另外一個就是背景圖像的重復方式。
4、還可以在右邊的樣式規則窗口進行各種的設置的編輯。
5、最後把repeat-x變化?repeat-y的時候，網頁中的圖像也就發生了變攜棚化。
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:20px20px;
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這幾個常用的屬性即可。
歡迎大家一起交流，討論。
CSS里的「background-repeat:repeat」是什麼意思？在CSS中，background-repeat?屬性設置是否及如何重復背此帶景圖像。
示例代碼：
html
head
meta?charset="utf-8"?
title示例/title
style
body
{
????background-image:url('paper.gif');
????background-repeat:inherit;//repeat，repeat-x，repeat-y,no-repeat
}
/style
/head
?
body
pinherit/p
/body
/html
1、background-repeat:repeat?是默認屬性，使背景圖像在水平和垂直方向上重復指悉。
2、background-repeat:repeat-x?背景圖像將在水平方向重復。
3、background-repeat:repeat-y?背景圖像將在垂直方向重復。
4、background-repeat:no-repeat?背景圖像將僅顯示一次。
5、background-repeat:inherit?規定應該從父元素繼承?background-repeat??????屬性森逗蘆的設置。
『肆』 前端怎麼改變盒子中圖片位置
1、首先打開前端開發工具，新建一個html代碼頁面，在html代碼頁面上創建一個用於設置背景顏色的div標簽，給這個標簽添加上class=bg-img。
2、其次設置背景圖片，創建style標簽，在標簽裡面對類為bg-img設置背景圖片、圖片不重復、寬、高的樣式。保存html代碼，使用瀏覽器打開，這個時候會發現瀏覽器上的背景圖片顯示在左上角。
3、最後回到html代碼頁面，在bg-img類里添加background-position：center的屬性，保存html代碼後重新刷新瀏覽器，這個時候會發現瀏覽器上的背景圖片已經自動居中了。
『伍』 css中如何調整插入背景圖片的大小
可以通過cover和contain來對圖片進行伸縮。
語法：
background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */
background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設置一個值時，將其作為圖片寬度來等比縮放 */
background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設置一個值的時候同也將其作為圖片寬度來等比縮放 */
background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */
background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */
(5)盒子元素的背景圖片咋插入擴展閱讀：
CSS背景圖片自適應、全屏、填充、拉伸
方法一：js控制
<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
</div>
<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
});
</script>
方法二：全瀏覽器兼容
.bg{
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}