logo标签列表

CSS背景位置Chrome

cssgoogle-chrome
5

好的，我已经通过类声明在元素上设置了一个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%; '>

尽管元素标签内没有特定的样式声明，但仍然可以进行定位。非常感谢您的建议。
编辑：显然有人认为我试图利用这种方式来定位元素。这是错误的。我正在尝试定位背景图片。
应该是-webkit-background-position吧？ - 11684
7个回答
3
2
在Chrome浏览器中，要解决这个bug，你需要在背景位置使用百分比。当改变位置时会正常工作。
希望对你有所帮助。
1

顺便提一下，我曾经遇到过类似的问题。我使用JavaScript动态重新定位元素，使用jquery('[element]').css('background-position')属性，但在Chrome中没有显示出来。

后来我发现，在外部样式表中也声明了该元素：

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

我最终在样式表中删除了元素的 140px 60px 部分，这对我起作用了。也许对你也有用呢？

0

这个对我几乎有效。它将元素定位到右侧，但在Chrome浏览器中不考虑0.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;
}
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。- 来自审核 - Alvin
0

我在尝试这个的时候发现Chrome和其他Webkit浏览器可以正常渲染背景位置，我使用了一个单一的背景声明，像这样：

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

也许你可以以同样的方式声明样式，看看是否有效。
这并没有产生任何影响。无论出于什么原因，它继续在元素上明确设置背景位置样式属性，即使在该元素上甚至没有添加任何样式属性。 - Anonymous
你尝试过添加!important来查看是否可能存在冲突吗？例如：background: url(http://www.domain.com/image.png) -175px 0 !important; - Steve Adams
啊，添加重要内容似乎解决了问题并引起了其他问题，但其他问题应该更容易解决。 - Anonymous
0
如果你想定位某个元素，请检查 position 属性：absolute（绝对定位）| relative（相对定位）| fixed（固定定位）| static（静态定位），并根据 W3C 标准添加 top 和 left。我不太了解 background-position，但我相信你可以用我的方法处理这个属性。
0
我知道它应该处理背景图片... 我不是傻瓜，我正在处理一张背景图片。 - Anonymous
1
我并没有说你很蠢；我是在试图帮助你。设置“background-property”不会有任何作用，除非也设置了“background-image”。或许可以包含一个链接到相关页面，这样我们就可以看一下？ - Kai
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接