javascript - 使用 :target 时的 CSS 背景位置

Question

好吧，我环顾四周，找不到足够好的答案来解决这个问题。

基本上，我要做的是在单击按钮时最小化我的网站标题。

这是 CSS:http://emstectest.site44.com/style.css

我一直在努力让这个工作，但问题是，我正在尝试制作背景图像，它是一种深蓝色分隔线颜色，当展开链接打开时，它将标题和正文分开单击(在#header 样式上使用 :target)。

但是我试过类似的东西:

#header:target { background-position: center -300px; }

但唯一真正移动背景图像的是当我这样做的时候:

body { background: url (PATH) repeat-x center -300px; }

如有任何帮助，我们将不胜感激。由于我在该领域缺乏知识，因此我拒绝在这方面使用 Javascript；那以及我希望加载时间成为主要优先事项的事实。

另一个问题是:是否还有一种方法可以使用 -webkit- 为这个过程制作动画，或者我是否必须再次使用 Javascripting？

提前致谢。- 詹姆斯

Answer 1

From the w3schools.com

Definition and Usage

URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

Look at an example here

您的图像具有 440 像素的固定宽度，因此如果您尝试降低高度，则需要调整它的比例。