HTML DOM 快速導覽 - 樣式設定的屬性 backgroundAttachment

CSS 樣式表 (cascading style sheets) 的 background-attachment 性質 (property) 可控制 HTML 元素 (element) 的背景圖片是否在固定位置，亦可由 JavaScript 程式取得元素物件，再用 style 的屬性 (attribute) backgroundAttachment 進行設定。



backgroundAttachment 有以下的設定值
  • scroll
  • fixed


scroll 為預設值， fixed 會使圖片固定在相同的位置。


舉例如下
function run01() {
    document.body.style.backgroundAttachment = "scroll";
}

function run02() {
    document.body.style.backgroundAttachment = "fixed";
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style002.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


run01() 將背景圖片設定為 scroll ， run02() 設定為 fixed 。


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="style002.js" type="text/javascript"></script>
<style>
body {
    background-image: url(example.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
div {
    height: 60px;
}
</style>
</head>
<body>
<div>
<input type="button" value="scroll" onclick="run01();">
<input type="button" value="fixed" onclick="run02();">
</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
<div>There is no spoon.</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style002.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟，由於 CSS 設定為 fixed ，此時無論如何捲動捲軸，背景圖片始終出現在相同位置



點擊 scroll ，背景圖片就出現在網頁內容相對的捲軸位置


中英文術語對照
CSS 樣式表cascading style sheets
性質property
元素element
屬性attribute
瀏覽器browser


您可以繼續參考
CSS 範例

樣式設定物件 style


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/CSS
https://developer.mozilla.org/en/CSS/background-attachment
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)