我有一個大小超過 16000 x1 像素的生成影像。我希望這些垂直重復,以創建一個網格。我將該影像(base64 資料 url)設定為 div 的背景影像。
對于 16226 像素寬的影像,效果很好。對于一個 16958 像素,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,iVBORw0KGgoAAAANSUhEUgAAP2IAAAABCAYAAACeV8QgAAAAAXNSR0IArs4c6QAABltJREFUeF7tXcl220gMpH4gcx75GM7/f1CYY5Rz8gOaR8WOtXABGluhCV NpVBVZBpqxz5N03Qdx/E0ZPiaUV4zAM2NcfbE XzOPYQBejX7qRUyGHKl5OVyGdA9IaZVXMBPD1knnUFnT2T5t0NnYhnrR8hOdZ6QCBJlKE5fTqyEi53czJ4AodBQnZjSmT3hyhjXgMx4Zrjp6DJPIE0ipamnWWRc1C4q46/H7Ay76DLvHx zYX2I1cPb5raL/jeevD4f7IEzrXeDJheatWTniXV25BjlFbS0s6uDOeOuJ0Bgg8Cws4dLZRqLu55wwRrXhMZSHD5uZ415HjyxUlCjz tsNlW5HFb8MwOnYZq 1b1oAmN4PkF5d9EEQqaD Md5me5FMShufGIb0yJmhj5jhvK40FwFj0qRF6toVoXyhOZgEQ9YJz2XPFHSxIm7zr2fKlDviTgp/nRWob2hSEOKJVXp7kXB LPUxr72Mpnwu2h5wN4aTx10dtEn4bR11K7nznKuhnWeyKXXIlrlZybME8pzRCirM4JOFc35wzxBGAKPLQLoDkK270X5qjxm8PM7oDT9COl20fSM4w guovCvRbgAOEbYhjqXtRVJWSPfmJDPmN yoXMpaupXJrBeWJVfmNfMMozQl001G4C5wntAf/W611JPeK8PVHKtGhHYI0QQu2sv4sqgtO5vKZSYRSnyccdRKOycwfVXbSVVcP5WiHp5q0PiDi6zr2oLoNVLZYB7/NE7LQ5um OxxeLJiecBh8zx4AEPYgWn0f0xNW027XVbeBekEfXrrxRFL zVQW8KG iwqwcPmRtbrP5lXiRef7hP7y8zKc/63frcz1I0J8qzf3sKPtolZz7vGw9v0lPGgYW2dby vmPKFNzIHruXoC gGDBid0KG82V08IJuNN1dDo1qC9S3vmB1Z5hYapF1NePRGHbatzHCotpvPUue2ib2f238 x0cimKoIayJM9Y4O4FzUSjaoDNc4IJlxZtF3Uh6BywRbPu2fMrujrahizx2eavl/H8etMVn0tMfBgo2N4avc9UU45HAPliQjJsd836veiERRXT1UG5r3j7Xz2 vMdqtgzFYN5MxCA7O6ihBrN2ljWZoGCAcJCbRVMOk9IKOPmcuOtiAGq600JyRNA/BQUewbaPCFxriS3kY Xll4YvPo08rKS1uYJOQYuW9x4OUJGBWhwjDneQ//uop3NxWdCIUPKoTRfYYS5RM/3okoUHa7M7i7aAyOC54 fys9Ao3j t PXlzcRrPkvAT9coolpeakowpc WcwngYG7Hv/8/jGM41j3ogTajhIStXcchV/bOW1eIFiesJnRVpf qkffi5YLgBh4h3LoXRRIDuu3zeuo68MfYhe1Jryz ljnCTm5no/ Zi9PIHLaHipYeiIxLcos5ypn6YlcTEShxXtyyhNRXrDrK3XZ5i4qLW43NkxlbIqe0dHQ9ryL0hhYthclt41xTTtTUPL71S7K56z3jDpPgCm88ejbvBVe5/fwhNcsPupmm4aP18MTPlr11eVBSb6sIjJ68YQzbSLOV5NBhoi F535OZ2G4Tr/aFV9KTLQbrCed1FFgvVLLUnWLqMOvru78rQ/exfNoY4S6lWktNTvqVGXJH3BNGfMm/mlTwBFLsUeiqUoyLVizD1hwYtFTSGhgJCaJ9rzRE zNpMUmRjwuWb7Llpu bCKBRMWNanWrl2UytRx4jj3olHejeqb3QWtvE3fp v41ej/BraCyi4GCn4y/4 Be2dMlPEKhw8Dszu TdNV63NMsi19xgvukpeNek sWyevqrLH4XkXPSoPdBaZDHHCObF0wOzI5V0UBBx7ms EzQmo41HjBDgRUzm7KCL g8r2IIU2B3WekDpdWxEpHnl eWKHw/4k3zWNnicOSN4uuzkD9DwBOP 9TcuyZIHa70XJLXQCS1MdHglV6l6UQJJTCIrtt3dRFJROolSb2 VbvvKPt046iuz5gNKuWxth3SOE/YzdRghUq5Y4DkiczyZcYe5NQ0u2gQP15tkaxbu iT6kjieBnyqc/DLpqdj z4gzzw3JZ0nmjAWvI0kAaSYuUJjPG0nUmoRwix4kartY4ntNBYsVV1OQywPLEiPboj Pj4GRzO0WNrF0VUKNaTOLtoLA8sZySCyprrPfh/3y3GAeax5B8AAAAASUVORK5CYII=");
}
#div2 {
margin: 10px;
height: 100px;
width: 16958px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAQj4AAAABCAYAAAAIyb0SAAAAAXNSR0IArs4c6QAABgpJREFUeF7tnEty40gMRKkLTO89W/n F/J2vJ 5gCdohS1SElmJKvwL3hqFT YrNhF09OXj4 Prer1elmQ/60Bf4Ex4LB4Jln4Ik87f19XPqZWVt7c3PMnwOMMJ8F4ni5RW9vPzcyGxoqm/9PAKsyQY4VellZWM/wYpYNBVIjI7bO8rmiJo1uoiQvqQjQBsrEjLkyW/jc0s6p2yoj0XsR4xnEUviyRe5qznioX7tJqeWFHfg4yHNy7/DYqHHmjELovrnZk6DByPOdWOakfALbkLfJ5tfGfm0IsjhxexM82y17TeV7wwJt/HKMXFirxHRxVGvWt1zp2/WDlXnFvvlr8svxdq sbK wX/KgtMQ qVFAwUny1ETz/yd bJrNBzwr wc 3M5fwIkeM780h1vrOZKPA6S73b8vGaPdM3K /XC/wHh9kFUZ9P imC5EdilsXNcwVrV93JKnhXwA0rs5gS E5E2Jm/5Q2hcYgmu2/lXDtzt0x5Dg7grLUz31scaDaPYyEnyfa MgOJVjNmYyXkhQ3SdF5WrG5fEOM72szLSocY6Y7w3hfSzsxbOp0z2QdKuTMX0yLYau3MIs1X0o0C8hek3leiANfBQvNIM2AnTrEShRX7Pu s0Biz77w60FbA6rnih0xqJ9R4bUfl6pF2Zrk2XGWub1ev7djuzPPeGFeoqjaz9/ycAJmduahTNVypmNX7itJ4QctQbrveiD5ZqeeSHgF4JTtWJuEh0Zh2rOA8Y5HBTAnW7upB7cwYia2ogNa3Rnr6fcrvzGQViAdIYJCCTxrhykOY9aGkzM78qh DWQmyVGhbgRjvK8VZ20n5iBisEHUQQus8LbEoMXyrwMBRopD78IysYFpiUbi43PnwylqRGVnR0k6jzpZAaxrn2JmtVSZQxdIqS5IkO7OMFjtxFEoQCHIRSt6ZS0MXvvE2gZnK/75yr4t1wDu1m2wJhyezklADN3yhjRh5QGYFnccizkjDp1G99MHsgT0rQYS1atOq7gvO5tiZmS YQToPyMh Z/YwoYGxAiU9KEnemX91YOqeKY2APY5TSojWzmn/vuLYEu3W2nZpd7SrV6zoyO8cA0iEYgWRKYPTyJznMcXKuIZyGR4ZtWW2dmaq05hfWBS1tnz8Wd yO7PwbFENEZZFKn17Z9YxRKeKlIpz5F3/Dfr3r7/nGLamfK0AeFH//PfPcr1e1 j6cagAaKNK57UHqcjcLiIFBWPe6Vhh1K4NQJAIUJPamYP4CbX58yrxBUW3g/YQkXdmkMF2HxVxpoC2zEi99s5cnpYCNwWme19xZDxyl7XaRXrxywrSvZaSVaeeK8UARQG/zxXKFJ2x9ehqCreVqHbmplynAaFwIzb7GE7emcek3ZwmNs5Wl5AoQIuEaQ61R8c83Jl9/ZlNnyR16q4ACsSJZlO/rxRLJAWmYeX3XjFcMJLCo8Gv 7WYQoIVizlGHanzbQUkWGlXrYhjBfzetBg7s1/9Hj2P0yn9vtrtzPRe U9kdpZfrfrOfKYpyBIYxu/emlGveL2vSDio559E97eczzOMs5JBFznFvWTmcGmclU41OJo/Ki2Zu3Nc/mP6Q5qxwi9eZexSAGfO3c6Mt/6kzKujA m6lM98aO6dmdHZCaCsnZlhZ2ZETjTVIM/1viLqTqrkxYqknYMXWbK1jtzFyqNoufztQOLwSLHCqaZQLif4utuZheSutOMKTL0zO7mv4y7qZHi1M3uQ0EMPKp9wXQyKsVbvKxudpH2Tzo9Z3h11ZyX4IN0KGB0MKDfbc V09oDCGCH0uqwP/bas OjIlUnBm F1NOzODMkABQXnQa99 s5c uu440/n s6s4zxaxR8h987Z3m1RMSrOmQI4nW1W8FzOREjQji/t26wkkLxGYFGgWGGRcYokyM7s60n4Y8toV6Pnp8BjNyR9Z46pUZEx7tttZ36/LEvr/3C/qV2aj2vuPsOByfW 4t65sQYZL3exMmYF TSjd TagweKlUEBgePyeMhXWMfMxIqOYgAcrkL4VEF2ZlejHzXDJ0mIcS2a1NiZs9qYda4jDv8HNmunAaj 7NgAAAAASUVORK5CYII=");
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/)來檢查較大的影像是否有效
How can I display the larger images and have them repeated vertically? I could use img elements, but I am trying not to have one img element per pixel. I could also paint each line over and over and make a larger image to display inside an img element, but the background-image approach would be preferable.
Am I doing something wrong here?
Thanks!
uj5u.com熱心網友回復:
您的第二個 div 在 Firefox 上顯示正常,但似乎沒有瀏覽器必須支持的標準最小長度。
例如,MDN說:
長度限制 盡管 Firefox 支持基本上無限長度的資料 URL,但瀏覽器不需要支持任何特定的最大資料長度。例如,Opera 11 瀏覽器將 URL 限制為 65535 個字符,這將資料 URL 限制為 65529 個字符(65529 個字符是編碼資料的長度,而不是源,如果您使用純資料:,不指定 MIME 型別)。
我還沒有找到 Chrome 長度的具體定義,但它看起來好像是 16KB(16384(編輯)像素,見評論),現在看起來相當小。希望有人能找到一個明確的宣告。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/358391.html
標籤:html css google-chrome background-image
