zoukankan      html  css  js  c++  java
  • 背景图片拉伸问题

    假设用户显示器的宽度是1000px,然后用background-image设置一张宽度为800px的背景图片,

    然后把图片的排列方式设置为no-repeat。问题就出来了。还有200px的网页空间是空白的,

    怎么把这张宽度为800px的图片设置为用户显示屏宽度的100%,也就是拉伸这张背景图片。

    .di{
                    120%;
                    height:91px;
                    position:relative;
                    z-index:1;
                    background:url(../img/foot-bg.jpg);
                    background-repeat:no-repeat;

    }

    .di{
                    120%;
                    height:91px;
                    position:relative;
                    z-index:1;
                    background:url(../img/foot-bg.jpg);
                    background-repeat:no-repeat;

          background-size:cover;

    }

    ,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。

    .di{
                    120%;
                    height:91px;
                    position:relative;
                    z-index:1;
                    background:url(../img/foot-bg.jpg);
                    background-repeat:no-repeat;

         background-size:90% 91px;

    }

    可以直接设置高度跟宽度这样可以看起来舒服点

  • 相关阅读:
    advisor调优工具优化sql(基于sql_id)
    关于等待事件cursor: pin S
    队列等待之enq: TX
    HTML5+CSS3从入门到精通 中文pdf完整版[229MB] 下载
    unity 控制透明度
    unity 限制模型移动的边界
    unity监测按下键的键值并输出+unity键值
    unity EventTrigger与模型
    wpf 获取桌面上的鼠标位置
    unity 代码更换ugui中image的关联素材
  • 原文地址:https://www.cnblogs.com/yi11/p/6579489.html
Copyright © 2011-2022 走看看