gpt4 book ai didi

html - 为什么我需要 background-size 200% 而不是 cover

转载 作者:太空宇宙 更新时间:2023-11-04 06:01:21 24 4
gpt4 key购买 nike

我正在尝试使用内联 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>

最佳答案

如评论所述,您可以调整 View 框以覆盖路径并避免有额外的空间和使用 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>

你也可以在不需要 SVG 的情况下使用 CSS 和渐变来做到这一点

.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>

关于html - 为什么我需要 background-size 200% 而不是 cover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57274852/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com