gpt4 book ai didi

css - Firefox 中的 SVG 背景

转载 作者:技术小花猫 更新时间:2023-10-29 11:22:08 24 4
gpt4 key购买 nike

在我 friend 的网站上工作时,我不知道如何在 Firefox 中正确显示 SVG。在 Edge 中,它也会在我调整浏览器大小时消失。

http://lene.isreborn.com/

CSS -(我必须使用 important 因为它是 Wordpress):

header::after {
content:"";
display: block;
background: url(/svg-filer/header-background.svg);
background-size: contain;
background-repeat: no-repeat;
top: 0;
left:-1%;
width: 102% !important;
height: 90px !important;
position: absolute;
z-index: -1;

-ms-transition: top ease .5s;
-moz-transition: top ease .5s;
-webkit-transition: top ease .5s;
transition: top ease .5s;
}

header.sticky-active::after {
top: -20px;
}

SVG 文件:

  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none">
<polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>
</svg>

最佳答案

我现在知道了:背景大小不适用于“包含”,但适用于 100% 100%,看 Mozilla Background rules
开发者网站链接:See here

header::after {
content:"";
display: block;
background: url(/svg-filer/header-background.svg);
background-size: 100% 100% !important;
background-repeat: no-repeat;
top: 0;
left:-1%;
width: 102% !important;
height: 90px !important;
position: absolute;
z-index: -1;

-ms-transition: top ease .5s;
-moz-transition: top ease .5s;
-webkit-transition: top ease .5s;
transition: top ease .5s;
}

header.sticky-active::after {
top: -20px;
}

关于css - Firefox 中的 SVG 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40152111/

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