为什么 Chrome / Brave 不在一定宽度上渲染 div 的背景图像?怎么修?
Why Chrome / Brave does not render background-image of a div over a certain width? How to fix?
我生成的图像大小超过 16000 x1 像素。我希望这些垂直重复,以创建一个网格。我将该图像(base64 数据 url)设置为 div.
的背景图像
对于 16226 像素宽的图像,效果很好。对于一个 16958px,chrome/brave 呈现白色背景。
查看下面的重现:
body {
font-family: sans-serif;
}
#div1 {
margin: 10px;
height: 100px;
width: 16226px;
border: 1px solid #000;
background-image: url("data:image/png;base64,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");
}
#div2 {
margin: 10px;
height: 100px;
width: 16958px;
background-image: url("data:image/png;base64,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");
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
你也可以在这里看到:
https://codesandbox.io/s/kind-dewdney-hgjx3?file=/src/styles.css
我通过将生成的图像粘贴到 base 64 查看器(例如 https://jaredwinick.github.io/base64-image-viewer/
来检查大图是否有效
如何显示较大的图像并让它们垂直重复?我可以使用 img
元素,但我尽量不让每个像素有一个 img
元素。我也可以一遍又一遍地绘制每一行,并制作一个更大的图像以显示在 img
元素内,但 background-image
方法更可取。
我是不是做错了什么?
谢谢!
您的第二个 div 在 Firefox 上显示正常,但似乎没有浏览器必须支持的标准最小长度。
例如,MDN表示:
Length limitations
Although Firefox supports data URLs of essentially unlimited length,
browsers are not required to support any particular maximum length of
data. For example, the Opera 11 browser limited URLs to 65535
characters long which limits data URLs to 65529 characters (65529
characters being the length of the encoded data, not the source, if
you use the plain data:, without specifying a MIME type).
我还没有找到 Chrome 长度的具体定义,但它看起来好像是 16KB(16384(编辑)像素,见评论),这在现在看来相当小。希望有人能对此找到明确的说法。
我生成的图像大小超过 16000 x1 像素。我希望这些垂直重复,以创建一个网格。我将该图像(base64 数据 url)设置为 div.
的背景图像对于 16226 像素宽的图像,效果很好。对于一个 16958px,chrome/brave 呈现白色背景。
查看下面的重现:
body {
font-family: sans-serif;
}
#div1 {
margin: 10px;
height: 100px;
width: 16226px;
border: 1px solid #000;
background-image: url("data:image/png;base64,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");
}
#div2 {
margin: 10px;
height: 100px;
width: 16958px;
background-image: url("data:image/png;base64,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");
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
你也可以在这里看到:
https://codesandbox.io/s/kind-dewdney-hgjx3?file=/src/styles.css
我通过将生成的图像粘贴到 base 64 查看器(例如 https://jaredwinick.github.io/base64-image-viewer/
来检查大图是否有效如何显示较大的图像并让它们垂直重复?我可以使用 img
元素,但我尽量不让每个像素有一个 img
元素。我也可以一遍又一遍地绘制每一行,并制作一个更大的图像以显示在 img
元素内,但 background-image
方法更可取。
我是不是做错了什么?
谢谢!
您的第二个 div 在 Firefox 上显示正常,但似乎没有浏览器必须支持的标准最小长度。
例如,MDN表示:
Length limitations Although Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type).
我还没有找到 Chrome 长度的具体定义,但它看起来好像是 16KB(16384(编辑)像素,见评论),这在现在看来相当小。希望有人能对此找到明确的说法。