ããå¦ä½ç¨css精确å®ä½å°å¾ççä½ç½®
é¦å 设置åºå®å¾ççcsså±æ§æ¯background-attachment
background-attachmentå®æ两个å±æ§å¼fixed/scroll
background-attachmentï¼fixed;表示åºå®å¾çï¼å¾çä¸éç页é¢æ»å¨èæ»å¨ã
background-attachmentï¼scrollï¼è¡¨ç¤ºä¸åºå®å¾çï¼å¾çéç页é¢æ»å¨èæ»å¨
background-positionè¿ä¸ªå±æ§ç¨æ¥å®ä½å¾ççä½ç½®ã
æ们éç¹ç»å¤§å®¶å享background-positionè¿ä¸ªå±æ§
2background-position;çè¯æ³ç»æï¼ç¨æ°´å¹³ååç´ä½ç½®è¿è¡å®ä½ã
background-position:x y;
å ¶ä¸ï¼xæä¸ä¸ªå¼ï¼left(å·¦)ï¼center(ä¸),right(å³)ãç¨æ¥è®¾ç½®æ°´å¹³ä½ç½®ï¼
yä¹æä¸ä¸ªå¼ï¼topï¼ä¸ï¼,center(ä¸)ï¼bottom(ä¸)ãç¨æ¥è®¾ç½®åç´ä½ç½®ï¼
两个å±æ§å¼å¾ä¸é´ä¸å®è¦ç¨è±æçç©ºæ ¼ ï¼éå¼ã
代ç å¦ä¸ï¼
<style type="text/css">
<!--
#img{
background-image:url("å¾çåæ¾è·¯å¾"); /*æå ¥èæ¯å¾*/
background-repeat:no-repeat; /*设置å¾çä¸éå¤*/
background-color:#00ffff; /*设置èæ¯é¢è²*/
background-position:left center; /*ç¨å± ä¸å¯¹é½è®¾ç½®æ°´å¹³è·ç¦»ï¼ç¨ä¸é¢å¯¹é½è®¾ç½®åç´è·ç¦»*/
width:400px; height:150px; /*设置宽度 åé«åº¦*/
}
-->
</style>
<div id="img"></div>
3background-position:左边è·ç¦» ä¸è¾¹è·ç¦»ãè¿ä¸ªç¨æ¥æ¾å¾çã
æ¯å¦ä¸å¼ 大å¾ä¸é¢æå¾å¤å°å¾ï¼ä½ åªæ³ç¨å°å ¶ä¸ä¸ä¸ªå°å¾å°±ç¨è¿ä¸ªæ¾ã
代ç å¦ä¸ï¼
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("å¾çåæ¾è·¯å¾"); /*æå ¥èæ¯å¾*/
background-repeat:no-repeat; /*设置å¾çä¸éå¤*/
background-color:#00ffff; /*设置èæ¯é¢è²*/
background-position:60px 50px; /*设置水平è·ç¦»ååç´è·ç¦»*/
width:400px; height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>