Question

我正在尝试使用内嵌svg作为背景图像（数据url），但是background-size:cover似乎效果不佳，但是与200%一起使用非常合适。

我想了解这个问题，以便可以确保我在不同浏览器上的渲染效果一致。理想情况下，如果可能的话，我想继续使用background-size:cover

.card {
  display: inline-flex; /* required in my context */
  width: 45vmax;
  background-color: lightblue;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 2"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg>');
  background-size: cover;
}

._200percent {
  background-size: 200%;
}

.video {
  padding-top: 56.25%;
}

body {
  margin: 0;
}

<a class="card">
  <div class="video"></div>
</a>
<a class="card _200percent">
  <div class="video"></div>
</a>

Answer 1

如前所述，您可以调整视图框以覆盖路径，并避免多余的空格和使用200%

svg {
  border:1px solid;
  width:200px;
}

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 2"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg>

您也可以使用CSS和渐变进行此操作，而无需SVG

.card {
  display: inline-flex; /* required in my context */
  width: 45vmax;
  background: 
    linear-gradient(to bottom right,rgba(255,0,0,0.4) 49.5%,rgba(255,0,0,0.2) 50%),
    lightblue;
}

.video {
  padding-top: 56.25%;
}

body {
  margin: 0;
}

<a class="card">
  <div class="video"></div>
</a>

为什么我需要背景尺寸200％而不是封面

1 个答案: