Question

我在拉伸特定图像以适应其parrent div时遇到问题。

在chrome / fire上，这很有用。

在IE上（我使用11），此图像不会拉伸到其容器。

我尝试了每一个例子。

请查看来自plunker的代码：

https://plnkr.co/edit/KHbgUXjDc349RpPgcWV9?p=preview

<div class="cls-1">
 <div class="cls-2"></div>
  <div class="lp__box-shadow icon-login_shadow"></div>
</div>

.icon-login_shadow {
    background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bopacity%3A0.2%3Bmix-blend-mode%3Ascreen%3Bfill%3Aurl%28%23linear-gradient%29%3B%7D%3C/style%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%22251.59%22%20y1%3D%22193.59%22%20x2%3D%22251.59%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.14%22%20stop-color%3D%22%232f343b%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%220.52%22%20stop-color%3D%22%23337082%22%20stop-opacity%3D%220.41%22/%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23369fb9%22%20stop-opacity%3D%220.73%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337b1cf%22%20stop-opacity%3D%220.85%22/%3E%3C/linearGradient%3E%3Csymbol%20id%3D%22login_box_mirror%22%20data-name%3D%22login%20box%20mirror%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Crect%20class%3D%22cls-1%22%20width%3D%22503.17%22%20height%3D%22193.59%22/%3E%3C/symbol%3E%3C/defs%3E%3Ctitle%3Elogin%20shadow%3C/title%3E%3Cg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%3E%3Cg%20id%3D%22login_2%22%20data-name%3D%22login%202%22%3E%3Cg%20id%3D%22Login_background_window_copy%22%20data-name%3D%22Login%20background%20window%20copy%22%3E%3Cuse%20width%3D%22503.17%22%20height%3D%22193.59%22%20xlink%3Ahref%3D%22%23login_box_mirror%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') no-repeat center center;
     -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.lp__box-shadow {
    margin-top: 0.5em;
    height: 50px;
    width:100%;
}

.cls-1{
  width:50%;
}

.cls-2{
  border: 1px solid red;
  height:50px;
  width:100%;
}

编辑：谁认为它是重复的，在plunker上显示它，“复制”在我的情况下不起作用

Answer 1

使用它：

background: url('url.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

背景封面 - 不工作即

1 个答案: