使用 :target 移动背景图像答案

【问题标题】：Moving Background Image using :target使用 :target 移动背景图像
【发布时间】：2013-07-07 14:51:08
【问题描述】：

是否可以移动背景图像，使用锚点和 :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 每次点击。我可以移动它一次，但之后就不能再移动了。有人知道我能做什么吗？

【问题讨论】：

标签： image css background target

【解决方案1】：

不，仅使用 CSS 是不可能的。您可以设置/取消设置一次偏移量（就像您设法做到的那样），但是如果不咨询 JavaScript，就无法多次添加任何内容。

除了一些伪选择器（其中一个是 :target，其他是 :hover 和 :active 例如）和一些 Shadow DOM 魔法（主要是输入元素）之外，DOM 本身几乎没有任何通知用户正在做一个页面。相反，浏览器依赖于可以使用 JavaScript 观察到的事件。

因此，您将无法计算锚点的点击量，您只能查看它是否处于活动状态。不止一次移动背景是不够的。恐怕您将不得不为此使用 JavaScript。

【讨论】：