使用移動背景圖片：目標

Question

是否可以使用錨點和：target選擇器，每次點擊某個數字或px來移動背景圖片？

HTML：

<div id="main_pic">pictures</div> 
<a href="#main_pic">right</a> 

CSS：

#main_pic { 
    height: 750px; 
    width: 491px; 
    background-image: url(file:///Mac%20Drive/Users/ludicious/Websites/Jongbom/images/main_comic.png); 
    background-position:0px 0px; 
    text-indent: -9999px; 
    display: block; 
} 
#main_pic:target { 
    background-position:+491px 0px; 
} 

我有+ 491px試圖將圖像移動到許多PX每次點擊的權利。我可以移動一次，但之後不會再移動。任何人都知道我可以做什麼？

Answer 1

不，這是不可能的只使用CSS。您可以設置/取消偏移量一次（就像您設法做的那樣），但是如果沒有諮詢JavaScript，就無法一次添加任何偏移量。除了一些僞選擇器（其中一個是：target，其他是：hover和：active）和一些Shadow DOM魔術（主要是輸入元素）之外，DOM本身幾乎不知道什麼是用戶正在一個頁面上進行操作。相反，瀏覽器依賴於可以使用JavaScript觀察到的事件。

因此，您將無法計算錨點上的點擊量，您只能看到它是否處於活動狀態。這不足以移動背景不止一次。恐怕你必須爲此使用JavaScript。