css 背景固定樣式background-attachment屬性基礎(chǔ)
發(fā)布時(shí)間：2017-03-08 19:24:49 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng),需要的朋友可以參考下
一、background-attachment屬性
在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng)。
語(yǔ)法：
background-attachment:scroll/fixed;
說(shuō)明：
background-attachment 屬性只有2個(gè)屬性值。scroll表示背景圖像隨對(duì)象滾動(dòng)而滾動(dòng)，是默認(rèn)選項(xiàng)；fixed表示背景圖像固定在頁(yè)面不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。
舉例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:160px;
height:1200px;
border:1px solid gray;
background-image:url("cartoongirl.gif");
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
在瀏覽器預(yù)覽效果如下：
分析：
大家在瀏覽器中拖動(dòng)右邊的滾動(dòng)條會(huì)發(fā)現(xiàn)，背景圖片在頁(yè)面固定不動(dòng)。
在IE或者360中設(shè)置background-attachment之后不能設(shè)置background-position屬性，不然圖片沒(méi)辦法在瀏覽器顯示。大家可以測(cè)試一下google瀏覽器、Firefox瀏覽器。
相關(guān)文章
css background-attachment屬性進(jìn)階
前提是定義了background-image屬性，然后用background-attachment來(lái)指明背景圖的位置是固定于視口的，還是隨著包含塊移動(dòng)的。可簡(jiǎn)單理解為定義背景圖片隨滾動(dòng)軸的移動(dòng)方式2017-03-08
關(guān)于css中的 background-attachment 屬性詳解
這篇文章主要介紹了關(guān)于css中的 background-attachment 屬性詳解,在日常的使用中，還是background-attachment:fixed 使用的最多，因?yàn)檫@個(gè)屬性更多的時(shí)候是跟background-im2023-10-10
