【问题标题】:Safari issue with CSS backgroundCSS背景的Safari问题
【发布时间】:2014-04-08 14:42:19
【问题描述】:

此代码似乎适用于除 Safari 之外的所有设备。

background:url("/images/nav.png") 无重复滚动中心 center / 17px 17px rgba(0, 0, 0, 0)

当我擦除“/ 17px 17px”时,我会看到我的图像显示在该元素上。当我在 safari web inspector 中查看它时,它会显示 CSS 代码

background:url("/images/nav.png") 无重复滚动中心中心/17px 17px 透明

其他人遇到过类似的事情吗?它曾经可以工作,但后来我不得不缩放图像,这就是 Safari 问题出现的时候。谢谢!

【问题讨论】:

  • 检查下面我的答案中的小提琴,它显示了嵌入背景大小和单独声明背景大小的不同行为

标签: css background safari


【解决方案1】:

试试这个代码:

background:url("/images/nav.png") no-repeat center center rgba(0, 0, 0, 0);
-webkit-background-size: 17px 17px; //webkit support
-moz-background-size: 17px 17px; //Mozilla support
-o-background-size: 17px 17px; //Opera support
background-size: 17px 17px; 

它适用于所有浏览器。

【讨论】:

  • -moz-background-size 从 Firefox 3.6 (Gecko 1.9.2) 开始支持,但是从 4.​​0 开始不再支持。我认为其他人也是如此,请阅读:css3.info/preview/background-size
【解决方案2】:

似乎 Safari 无法解释 background 中的大小。

尝试添加:

background-size: 17px 17px;

所以你的 css 看起来像:

background:url("/images/nav.png") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size: 17px 17px;

这里是fiddle,显然你需要Safari浏览器才能看到区别

【讨论】:

    猜你喜欢
    • 2015-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多