【问题标题】:Background image doesn't fit well背景图片不合适
【发布时间】:2015-09-06 17:53:57
【问题描述】:

我想在页脚中添加背景图片。我从网上选择了两张与我的情况非常接近的图片。但是,它并没有涵盖所有内容,并且边界中有一条线我想去掉(一条灰色的线)。这是jsFiddle

这是我尝试过的解决方案,但没有改变:

.ui-footer {
    background: #000;
    background-image: url("http://powered.gr/neosite/images/demo/slide-1.png");
    background-size: 105% 105%;
}

【问题讨论】:

    标签: jquery image css jquery-mobile


    【解决方案1】:

    看看这个 Fiddle

    html { 
          background: url(images/bg.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
        }
    

    工作于:

    Safari 3+

    Chrome 随便+

    IE 9+

    Opera 10+(Opera 9.5 支持 background-size 但不支持关键字)

    Firefox 3.6+(Firefox 4 支持非厂商前缀版本)

    礼貌:CSS Tricks

    【讨论】:

      【解决方案2】:

      尝试将style元素附加到body设置#footerbackground-colorborder-colortransparent,设置.ui.pagebackground-repeat: no-repeat;

       $(function(){$("<style>",{"text":"#footer{background-color:transparent;border-color: transparent;"}).appendTo("body")})
      

      jsfiddle http://jsfiddle.net/h7gxpqn0/37/

      【讨论】:

      • 在不太复杂的地方使用重要的东西是不好的。https://css-tricks.com/when-using-important-is-the-right-choice/.
      • 不需要这么大的堆栈。 Footer 标签可以单独处理堆栈开始 footer { } 。此外,他有 data-* 到位,这使得避免堆叠非常容易。来自 BEM 方法的东西。谢谢
      猜你喜欢
      • 1970-01-01
      • 2016-08-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多