CSS背景位置Chrome

8xiog9wr  于 2022-12-01  发布在  其他
关注(0)|答案(7)|浏览(146)

好了,我已经通过一个类声明在一个元素上设置了一个background-position属性,出于某种原因chrome,我假设所有的webkit浏览器都忽略了background-position属性。
我有这样的

.buttonholder {
background-position: -175px 0px;
}

<span class='buttonholder'>
<a href='index.php'>Home</a>
</span>

我在chrome中取出了Firebug类型的工具,出于某种原因,标签如下所示:

<span class='buttonholder' style='background-position: 0% 0%; '>

尽管在元素标记中没有特定的样式声明。如果您有任何建议,我们将不胜感激
编辑:显然人们认为我是在用这个来定位元素。这是错误的。我是在定位一个背景图像。

a7qyws3x

a7qyws3x1#

添加以下内容:

background-position-x: -175px;
background-position-y: 0px;

另请参阅:http://code.google.com/p/chromium/issues/detail?id=57963

z9smfwbn

z9smfwbn2#

在chrome中,为了解决这个问题,你需要在背景位置使用百分比。当改变位置时会很好。
希望它的帮助

bq8i3lrv

bq8i3lrv3#

顺便说一句,我遇到了一个类似的问题,我使用JavaScript通过jquery('[element]').css('background-position')属性动态地重新定位一个元素,但它没有在Chrome中显示。
我发现我还在外部样式表的CSS中声明了元素:

[element] {
  background: #becfd3 url([background image]) no-repeat 140px 60px;
}

我最终删除了样式表中元素的140px 60px部分,这对我很有效,也许对你也有效?

ev7lccsx

ev7lccsx4#

如果你想定位某个东西,检查一下位置:绝对的|相对的|固定的|静态,并根据w3c标准添加top和left。我不知道background-position,但我很确定您对该属性所做操作也可以用我的意见来处理。

fzwojiic

fzwojiic5#

background-position属性只用于定位背景图像,而不是元素本身。
background-position的参考:https://developer.mozilla.org/en/CSS/background-position(信息适用于Mozilla和Webkit)

b1payxdu

b1payxdu6#

我尝试了一下,发现chrome和其他webkit浏览器可以渲染背景位置,没有任何问题。我使用了一个单独的背景声明,如下所示:

background: url(http://www.example.com/image.png) -175px 0;

也许你可以用同样的方式声明样式,看看是否有效。

x4shl7ld

x4shl7ld7#

这一条对我来说几乎是有效的。它将元素定位在右边,但在Chrome浏览器中它不考虑.3rem。background-position-y在Chrome中也是有效的。

#email.active {
    background-image: url(./images/icon-error.svg);
    background-repeat: no-repeat;
    background-position-x: right, .3rem !important;
    background-position-y: center;
}

在Safari中,它以下面的方式为我工作,我没有任何问题与Safari中的定位.

#email.active {
    background-image: url(./images/icon-error.svg);
    background-repeat: no-repeat;
    background-position-x: right .3rem !important;
    background-position-y: center;
}

相关问题