背景图片不合适答案

【问题标题】：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-color，border-color到transparent，设置.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 方法的东西。谢谢