背景大小在不同的浏览器 [英] background-size in different browsers

查看:375
本文介绍了背景大小在不同的浏览器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在不同的浏览器上显示缩放的背景有些困难。我在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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆