缩放背景图像以适合ie8窗口 [英] Scale background image to fit ie8 window

查看:300
本文介绍了缩放背景图像以适合ie8窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用一个drupal 7模块来加载背景图像,但IE8不支持css3调整大小。

  background-image:url('image.jpg'); 
background-size:cover;

我不能轻易地使用通常的方法加载图像,例如将其放在DIV或使用ms-filter alphaimageloader来加载它。



如果这不能仅仅使用ie8支持的CSS,那么javascript解决方案是好的。 (也可以用于ie7的东西也是太棒了,但ie8是优先级)。

解决方案

将全尺寸背景图像添加到Internet Explorer 8和IE7



由于您无法使用常规方法轻松将背景放置在您的网站中,您可以在代码中放置图像?如果是这样,这个解决方案可能正常我用它来模拟IE8和IE7的全屏幕背景,并且效果很好。



将图像放在html代码的正文标签之后。 (您可以根据您的网站结构将其放置在其他位置,但您可能需要添加一个z-index。)接下来,此示例中的背景包含在IE条件注释中,因此只有IE8及更低版本才会看到它。 (注意:IE6中有bug,但是你可能可以让它工作,如果没有,只需调整条件注释即可包括IE7和IE8)。



HTML代码

 <!DOCTYPE html> 
< head>< / head>
< body>
<! - [if lte IE 8]>< img src =../ path-to-your-image / your-photo.jpgclass =ie87-bg>< ![ENDIF] - GT;

CSS

  .ie87-bg {
display:block;
位置:固定;
顶部:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}

你可能已经知道了这一点,但是这里有3种方法来定位旧版本的IE浏览器功能检测 - mattstow.com/layout-engine.html

$ Hacks - BrowserHacks.com

  • IE条件注释 http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

  • 有用的提示: background-image:none; 覆盖 background-size:cover 。 _黑客是一种方法来关闭IE6中的自定义IE背景 .ie87-bg {_display:none;}



    position:fixed; 在手机/​​触摸屏幕上是错误的。默认的位置:scroll; 可以很好的触摸。背景思想来自本教程 - http://css-tricks.com/ perfect-full-page-background-image /


    I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.

    background-image: url('image.jpg');
    background-size: cover;
    

    I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.

    A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).

    解决方案

    Add Full Size Background Image to Internet Explorer 8, and IE7

    Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.

    Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).

    HTML Code

    <!DOCTYPE html>
    <head></head>
    <body>
    <!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
    

    CSS

    .ie87-bg {
    display:block;
    position:fixed;
    top:0;
    left:0;
    min-height:100%;
    min-width:1024px;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    }
    

    You probably already know this, but here are 3 ways to target older versions of IE:

    1. JavaScript browser feature detection - mattstow.com/layout-engine.html
    2. Css Hacks - BrowserHacks.com
    3. IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

    Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.

    position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/

    这篇关于缩放背景图像以适合ie8窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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