问题标签 [background-position]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
910 浏览

css - CSS翻转 - 背景图像不会居中

我有一个翻转顶部菜单。我试图得到它,所以我的背景图像(17px x 13px)出现在悬停在中心。我已经尝试了所有背景 css 属性,但似乎没有任何效果。我会以错误的方式解决这个问题吗?

这是我的CSS:

这是该页面的链接。

http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html

0 投票
2 回答
1725 浏览

jquery - jquery - 单击并激活活动按钮

在 jQuery 中:

场景 ** - 我有四个具有悬停效果的 Div。- 全部使用 jquery 动画移动 backgroundPosition 以显示悬停状态。

问题** - 我想设置焦点或点击状态,这样一旦你点击了一个按钮,它就会进一步动画背景位置以显示新状态。我还希望这些按钮知道是否单击了任何其他按钮并删除当前的单击状态并开始在新选择的按钮上为新的单击状态设置动画...??

我的努力** - 我做了一些编码,但似乎无法解决这个焦点状态,再次提前感谢!;)

HTML **

CSS **

jQuery **

0 投票
1 回答
1496 浏览

css - CSS background-position 组合类型

CSS3 背景自定义是一个强大的工具,但对我来说它缺少一个功能。我可以通过几种方式设置背景位置,但我需要一些组合。例如,有一个动态调整大小的 div,我需要一个距离右边框 15px 的居中图像。我找不到任何方法来处理这个问题。我可以使用两个修复,它们都不优雅。
1. 我在图片右侧留了一个 15px 的空白区域。
2. 我用这个:background-position: 97% 50%
但是,在第二种情况下,如果重新调整 div 的大小,计算出的右边距会不正确。或者,我使用标准图像而不是 bg-image,但我尽量避免这种情况。
那么,有什么解决办法吗?
谢谢!

0 投票
2 回答
274 浏览

css - 如果#color 而不是图像,则背景位置不起作用

这样背景垂直移动


这种方式,是不是

我该如何解决这个问题?

0 投票
2 回答
24555 浏览

animation - 如何使用 css3 动画更改背景位置?

假设我有一个 div 元素,背景是position: 0%;我如何将位置更改为 egposition: 100%;但关键帧悬停

我似乎无法正确使用关键帧,它永远无法正常工作,而且我拥有所有最新的浏览器。

谢谢。

0 投票
1 回答
873 浏览

javascript - 使用 style.backgroundPosition 的 Javascript 计时器在 ff 和 chrome 中工作正常,在 IE 中没那么幸运

我在 js 中制作了一个非常简单的倒数计时器,它从数组中获取值并将它们应用于元素background-position属性(这会根据 的值显示图像的不同部分curS)。

这是代码:

这适用于 FF、Chrome、Opera 等,但不适用于 IE 7/8。我知道 IE 在旧的背景位置上有点不确定,并且已经读到它更喜欢background-position-x&background-position-y

所以我把下面的代码放在一个 IE 中,只有条件:

这也不起作用,计数器保持静止,任何人都可以解释这个问题吗?提前谢谢了。

0 投票
3 回答
350 浏览

javascript - javasctipt 中的 backgroundPosition 不起作用

基本上我在 css 中做了一个翻转,但我想要它在 javascript 中。我也想要,一旦我的页面被加载,其中一张图片将被自动选择。我为此尝试了这段代码,但它不起作用..有什么想法吗?由于某种原因,它没有调用该函数。ps:在我的html中,id也被称为clicked3

0 投票
1 回答
1166 浏览

jquery - 使用 JQuery 和 css 背景位置显示图像:抖动(firefox 除外)+ 百分比难题

我正在做一个 JQuery 动画菜单。这只是与我的问题有关的部分代码。

我有一堆动画(使用 JQuery)的 div,因此它们向左右扩展。在 div 中,我使用背景图像,当 div 扩展和收缩时,我想保持图像定位,使其不会移动。

这是一个(工作)自包含的完整示例,将其保存为 .html 以进行尝试。(你能以某种方式将它附加到stackoverflow中吗?)

http://jsbin.com/eyojah

给你两个问题:

1)如何计算背景位置百分比?反复试验表明,这里有 20% 是正确的。div展开时为left=0,width=600像素,折叠时为left=100,width=100。怎么变成20%?它不应该是折叠大小的左边缘(100/600 = 16.666%?)显然不是,但为什么不呢?

2) 这在 Firefox 中看起来很漂亮,但在 Safari 和 Chrome(我在 OSX 上)中,动画播放时图像会抖动。关于如何解决这个问题的任何想法,以便在其他浏览器中看起来更好?

0 投票
2 回答
255 浏览

javascript - javascript onmouse out 不工作

基本上,我将 css 的翻转转换为 javascript。我还选择了加载页面后要选择的一张图片。但是我遇到了 onMouseOut 事件的问题。除了那张照片,一切都很完美。当我将鼠标悬停在其他图片上时,该图片仍处于选中状态。我尝试了多种方法,但不知道如何解决它..有什么想法吗?

0 投票
3 回答
737 浏览

javascript - javascript onmouseover 和 onmouseout 问题

好的,我有一个 javascript 翻转。我希望在开始时选择 clicked3 图片,当我将其翻转或翻转其他图片时,clicked3 将被取消选择。我的 html 中的图片 ID 是:clicked1,clicked2,clicked3,clicked4。我已经完成了这段代码,但它不起作用。似乎图片1翻转不起作用,图片3没有开始选择......有什么帮助吗?