css - 背景图像大小不适用于所有浏览器

标签 css browser cross-browser positioning background-image

最奇怪的事情刚刚发生,我在修复页脚时遇到了一个问题,我不小心在我的代码中留下了包含后的 % 符号。看一看。我的网站是 usahvacsupply.com

html, body{
overflow:auto;
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat; 
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:contain%;
top: 0;
left: 0;
}

如果 contain 后没有 % 符号,它会抛出所有内容。 % 只满足 firefox 的要求。有谁知道所有浏览器的修复程序? IE 的 % 有帮助,但会抛出顶级导航选项卡。在 chrome 中,它完全不正常。我在这里非常困惑,因此不胜感激。

最佳答案

好吧,对于不同的前缀,您有不同的背景位置规则。

如果您想使用“包含”作为值,请尝试删除 %,然后遵循其他规则。

-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;

关于css - 背景图像大小不适用于所有浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16464654/

相关文章:

css - 如何在 UC 移动浏览器上垂直对齐输入元素的占位符?

html - 允许用户添加 html 格式的注释

css - 百分比高度在任何浏览器中都不起作用(使用 Bootstrap )

asp.net - 在 Datalist 中创建表

javascript - 我可以控制网络浏览器的加载图标吗?

css - - 跨浏览器的 webkit 支持

CSS 容器/文本自动调整大小

javascript - 直接客户端到客户端的消息

javascript - 如何检测浏览器中是否安装了小书签?

css - 在哪些操作系统或浏览器上 CSS 字体系列名称区分大小写