Question

我注意到我的标题的背景图片在ie6上根本没有显示。见http://goo.gl/YbW2xb

不想让我的网站在ie6上看起来很完美，但有一个快速解决方法吗？

非常感谢，

CSS：

header {
position: relative;
  width: 100%;
  height: 600px;
  margin-right: auto;
  margin-left: auto;
  background-size: 100% 100%, cover;
  background-color: rgb(222, 222, 222);
}

.wrapper-3 header {
  background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:    -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:      -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:     -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:         linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-position: 0% 0%, center center;
  opacity: 0.95;
}

HTML

<div class="wrapper wrapper-3 clearfix">
    <header class="clearfix">
</header>
</div>

Answer 1

由于IE 6不支持多个背景，因此简单的后备应该有效吗？

您的图片没有文件名，不确定是否有意！

.wrapper-3 header {
    background-image: url('../images/.jpg'); /* fallback */
    background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
    background-image:    -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
    background-image:      -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
    background-image:     -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
    background-image:         linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
    background-position: 0% 0%, center center;
    opacity: 0.95;
}

Answer 2

试试这个。用这个替换你的CSS。添加

.wrapper-3 header {
  background-image:url('../images/.jpg'); /*add this for IE*/

  background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:    -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:      -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:     -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:         linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-position: 0% 0%, center center;
  opacity: 0.95;
}

标题背景图片没有显示在ie6

2 个答案: