Question

是否可以使用锚点和目标选择器，每次点击一定数量或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。

使用：目标移动背景图像

1 个答案: