zoukankan      html  css  js  c++  java
  • 关于兼容IEn这个不得不提及的话题。。。。

    敲黑板 ~直入主题!!!

    1-关于背景(bg)

    ···为兼容ie背景要平铺

    HTML
      <!doctype html>
    <html>
    <body>
        ...Your content goes here...
    </body>
    </html>

      给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
      其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
      CSS body标签的样式如下:
      body {
    /* 加载背景图 */
    background-image: url(images/background-photo.jpg);

    /* 背景图垂直、水平均居中 */
    background-position: center center;

    /* 背景图不平铺 */
    background-repeat: no-repeat;

    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;

    /* 让背景图基于容器大小伸缩 */
    background-size: cover;

    /* 设置背景颜色,背景图加载过程中会显示背景色 */
    background-color: #464646;
    }

      上面最重要的一条就是:
      background-size: cover;

      这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
      这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。都知道,当把一个图片拉伸时,图片会变模糊。
      因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
      同时,为了让背景图始终相对于viewport居中,声明了:
      background-position: center center;

      上面的规则会把背景图缩放的原点定位到viewport的中心。
      接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
      解决办法就是:
      background-attachment: fixed;

    emmmmm…….最后还有一句 宽高真心要定死~~~定的死死的

    最后再把滚条干掉就完美了~

    应该是酱紫吧 要是有什么不妥留言即可!

    上面都是我百度⑧下来的一些bg属性的设置 啊哈哈  基础要搞好啊2333

    2-再来说一个关于背景透明的兼容性处理~

    大家都造在IE浏览器上 它并不识别各种透明属性设置!

    关于rgba的属性 最简单的方法就是过滤器~!

    且看代码:

                    background:rgba(255,255,255,.3);
                    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#44ffffff,endColorstr=#44ffffff);
    没错 这两句很重要~
    下面的url引入的是一个可以兼容IE的文件
    目前没怎么感觉到他的重要性
    不过他就是一个IE浏览器能够识别的语言 就像北京人说北京话 河南人说河南话 上海人说上海话一样的道理。。
    额。。。没有上传附件的功能啊~随后会把我的GitHub地址放到留言区  有需要的朋友可以直接带走~
  • 相关阅读:
    %zsy %lqs 随感
    polynomial&generating function学习笔记
    PKUWC2020自闭记
    考前最后的感叹:CSP2019 Bless All! & AFO
    AFO
    NOI2019 Fe
    [十二省联考2019]骗分过样例 luoguP5285 loj#3050
    python异常处理,草稿
    python操作excel
    python网络编程(requests)
  • 原文地址:https://www.cnblogs.com/yuanguliang/p/8617043.html
Copyright © 2011-2022 走看看