无法在 Chrome 和 Safari 浏览器中定位背景图片

Question

我的CSS中有以下代码：

#photos {
   width:340px;
   height:250px;
   background-image: url('../images/photosBoxIcon.png'); 
   background-position: top 20px right 20px;
   background-repeat:no-repeat;
   background-color:#211f1f;
   border: 1px solid #666666;
   float:left;
   margin-top:20px;
   border-radius: 2px;
   -webkit-border-radius: 2px;
  -moz-border-radius: 2px;  
}

虽然这段代码成功地将我的背景图标定位在Firefox和Opera中，但Chrome和Safari将图标定位在左上角。

当检查chrome中的代码时，我可以看到background-position: top 20px right 20px;行交叉，并且在该行的开头有一个警告标记，这意味着chrome认为此代码不正确。有人能认出我的错误吗？

Answer 1

使用任一

background-position: top right;

或

background-position:20px 20px;

你也可以使用缩写，比如：

background:#211f1f url('../images/photosBoxIcon.png') 20px 20px no-repeat;

http://www.w3schools.com/cssref/pr_background-position.asp

"background-position: top 20px right 20px;"

这可能不是一个正确的语法，这就是chrome不能正确显示结果的原因

Answer 2

background-position: top right 20px 20px;