背景大小在不同的浏览器 [英] background-size in different browsers
问题描述
在不同的浏览器上显示缩放的背景有些困难。我在Google Chrome浏览器上创建了网站,但是在iPhone或早期版本的IE上加载网站时,背景不会缩放,或根本不显示。
I have some difficulties showing a scaled background on different browsers. I created the website on a Google chrome browser, but when loading the site on a iPhone or earlier version of IE, the background doesn't scale, or just doesn't show at all.
我只需使用css代码:
I simply used the css code:
background-size:100%150%;
background-size: 100% 150%;
然后我将其更改为:
background-size:auto;
background-size: auto;
但这仍然会带来一些麻烦。
任何想法如何在每个浏览器和IE从版本6到现在可以调整/缩放此图像?
But this still gives some troubles. Any idea how I could resize/scale this image on every browser and IE from version 6 to now?
EDIT
使用下面的代码,一切都适用于Chrome,FF和最新的IE,但在IE8(和下面我认为),它显示未展开的图片。在iPhone上它根本不显示任何东西。 :/
With the code below, everything works on Chrome, FF and latest IE, But on IE8(and below I think) it show the unstretched picture. On iPhone it simply doesn't show anything at all. :/
#head-div
{
padding-bottom: 15%;
width: 100%;
background: url(../img/banner.gif) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale');
}
推荐答案
body {
background: url(image.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
}
这些是跨浏览器的要求。有5个这些确切的问题已经在堆栈溢出与答案完全像我的,所以没有必要问这个问题
These are the requirements for cross browser. There's like 5 of these exact questions already on stack overflow with answers exactly like mine so there was no need to ask this question
这篇关于背景大小在不同的浏览器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!