html - 如何调整使用 css 属性边框图像应用的拉伸图像的图像质量？

Question

我想为网站创建一个类似漫画的边框。我创建了一个尺寸为 640x640 像素的图像。每个站点的外部 10 像素是我的边界。所以在顶部和底部我有一条宽度为 620 像素的线（厚度不同），左右也一样。

.comicbox {
  min-width: 300px;
  min-height: 300px;
  margin: 20px;
  background-color: #ffcd03;
  display: inline-block;
  border: 10px solid transparent;
  border-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDY0MCA2NDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8cGF0aCBkPSJNNjM3LDNDNjM3LDMgNjI2LjkwOCw0LjQyNSA2MTQuMjgyLDQuOTIzQzU5OC4zMDksNS41NTQgNTc0LjQ4LDcuMyA1NDMuOTUyLDcuNDQ4QzUwNy4xNSw3LjYyNiA0NjIuMDY2LDUuODQxIDQxNC4yMzUsNi4wNjNDMzc2Ljc0Myw2LjIzNyAzMzcuNTYzLDcuMzE1IDI5OS4zNTksNy4yMkMyNzEuMjk2LDcuMTUgMjQwLjg1MywzLjExIDIxNS4xMTgsMy4xMTRDMTk3LjA1MSwzLjExNyAxNzcuODQ3LDYuMTA4IDE2MS44OSw2LjA4NUMxMjUuMTI4LDYuMDMyIDk0Ljk3OCw0IDc2LjEwMiw0QzUyLjM5OSw0IDUsNSA1LDVDNSw1IDYuNDU5LDEyMy44NTYgNS45NTUsMjU2LjA1QzUuNTQsMzY1LjAxNCAzLjE1MSw0ODMuMDQgMy4xMSw1NTEuMDM0QzMuMTAxLDU2NS45NzIgNS4wOSw1NzguNDk2IDUuMDc1LDU4Ny45NzhDNS4wNSw2MDMuNjU2IDQsNjM1IDQsNjM1QzQsNjM1IDIyLjgwOCw2MzQuMDYgNTIuMjYyLDYzNC4xMjhDMTA5LjE3Myw2MzQuMjYgMjA5LjU2Miw2MzUuNDI0IDMwOC45OTMsNjM1LjI0OEMzNTkuMTE5LDYzNS4xNiA0MDkuMDAyLDYzNC4wOTUgNDUyLjk0OCw2MzQuMDgxQzQ4NC43ODgsNjM0LjA3MSA1MTMuNTExLDYzNS4wNTQgNTM2Ljk1Miw2MzUuMDI5QzU0NC4wMjQsNjM1LjAyMSA1NjEuNjIsNjM0LjAxNSA1NzkuOTg2LDYzNC4wMUM2MDYuNjgsNjM0LjAwNCA2MzUsNjM1IDYzNSw2MzVDNjM1LDYzNSA2MzkuODc0LDQzNS40MyA2MzYuNjI4LDI2My4wMjVDNjM2LjE2LDIzOC4xNiA2MzYuNTAyLDIxMy44NiA2MzUuNjA5LDE5MC44MDVDNjM1LjA0NywxNzYuMjc0IDYzMy4zOTcsMTYyLjIzOCA2MzIuNjUxLDE0OC44NjdDNjMxLjY3MiwxMzEuMzM5IDYzNC43MDEsMTE0Ljk0NSA2MzQuNzM4LDEwMC4wNjZDNjM0Ljc2Miw5MC42MjQgNjM2Ljc4Myw4MS43OTIgNjM2LjgsNzMuNjY3QzYzNi44MzQsNTguMDc5IDYzNS44NjcsNDUuMDk2IDYzNS44OTcsMzUuNDA1QzYzNS45MzIsMjQuNjAzIDYzNywzIDYzNywzWiIgc3R5bGU9ImZpbGw6cmdiKDI1NSwyMDUsMyk7Ii8+CiAgICA8cGF0aCBkPSJNNjM5LjEzLDMuMTA1QzYzOS4xNjEsMi40NyA2MzguOTA3LDEuODU0IDYzOC40MzgsMS40MjVDNjM3Ljk2OCwwLjk5NyA2MzcuMzMxLDAuOCA2MzYuNzAyLDAuODg5QzYzNi43MDIsMC44ODkgNjMyLjIxMSwxLjUzIDYyNS40ODUsMi4xMDZDNjIyLjE3NCwyLjM5IDYxOC4zMjMsMi42NTggNjE0LjIsMi44MjdDNjAzLjUzMiwzLjI2NCA1ODkuMzYsNC4yMDUgNTcyLjAyNyw0LjgzOEM1NjMuNDMsNS4xNTMgNTU0LjA1NSw1LjM5MiA1NDMuOTQyLDUuNDU2QzUzNS43MDEsNS41MDggNTI3LjA0Myw1LjQ2NCA1MTguMDMxLDUuMzY0QzQ5OC42OTksNS4xNDkgNDc3Ljc0LDQuNzI1IDQ1NS43NzIsNC40MTZDNDQyLjI1OCw0LjIyNiA0MjguMzYyLDQuMDU4IDQxNC4yMjUsNC4wOUMzODcuOTQxLDQuMTUxIDM2MC44MjYsNC42IDMzMy44LDQuODg3QzMyMi4yODEsNS4wMSAzMTAuNzgsNS4xMjkgMjk5LjM2NSw1LjEyQzI5My44NDcsNS4xMjUgMjg4LjIzNyw0Ljk3NyAyODIuNTg5LDQuNzM1QzI1OS41MDgsMy43NDkgMjM1Ljc5MSwxLjIzIDIxNS4xMTgsMS4zMDRDMjExLjU2NiwxLjMxNiAyMDcuOTcyLDEuNDQzIDIwNC4zNjcsMS42MzlDMTg5LjYzLDIuNDQzIDE3NC43MTUsNC40MjYgMTYxLjg5Miw0LjQ1QzE0OS42NzgsNC40NzIgMTM4LjE5NSw0LjI3OSAxMjcuNjEzLDQuMDAxQzEyMi4yMjgsMy44NTkgMTE3LjA3NywzLjcwNyAxMTIuMTgzLDMuNTNDOTcuNzM3LDMuMDA2IDg1LjUyLDIuNDE0IDc2LjEwMiwyLjM4QzY4LjMyNiwyLjM1MiA1OC4wMDIsMi40MjIgNDcuNjM1LDIuNTI4QzI2LjM4NywyLjc0NiA0Ljk2LDMuMTE4IDQuOTYsMy4xMThDMy45MjgsMy4xNCAzLjEwNSwzLjk5IDMuMTE4LDUuMDIzQzMuMTE4LDUuMDIzIDMuMjQxLDM0LjQ2MSAzLjQ5Myw4MC4zMjhDMy42MTQsMTAyLjE3MiAzLjg0NSwxMjcuNzQyIDMuOTY0LDE1NS42MzNDNC4wOTgsMTg2Ljg1MSA0LjE2OSwyMjAuOTc4IDQuMSwyNTYuMDQzQzMuNjcxLDMzNy45NDYgMS4zMDgsNDI0Ljk2MyAxLjMxNyw0OTIuMDEzQzEuMzE5LDUwNi44NTkgMS44NjgsNTIwLjcxMiAxLjkxNSw1MzMuMzI4QzEuOTM3LDUzOS41NDUgMS44MDMsNTQ1LjQ1NyAxLjc3Miw1NTEuMDMzQzEuNzQ5LDU1NC45MjQgMS44NjIsNTU4LjY1MiAyLjA0LDU2Mi4yMDdDMi41NDYsNTcyLjI5MyAzLjU4OSw1ODAuOTcgMy41NDEsNTg3Ljk3NUMzLjUwNSw1OTMuMTA2IDMuMzUxLDU5OS45MTUgMy4xNiw2MDYuNzUzQzIuNzY3LDYyMC43ODkgMi4yMTgsNjM0Ljk0IDIuMjE4LDYzNC45NEMyLjIwMiw2MzUuNDM5IDIuMzk0LDYzNS45MjEgMi43NSw2MzYuMjcxQzMuMTA1LDYzNi42MjEgMy41OTEsNjM2LjgwNSA0LjA4OSw2MzYuNzgxQzQuMDg5LDYzNi43ODEgMTEuMTMsNjM2LjQ4NSAyMy4zMzksNjM2LjI3NEMzMS4wNjgsNjM2LjE0IDQwLjg2NSw2MzYuMDI2IDUyLjI1OCw2MzYuMDc4Qzg5LjI4LDYzNi4xMjMgMTQ0LjcwMiw2MzYuNTg0IDIwNi4yOTEsNjM2LjgyMUMyMTkuNzMzLDYzNi44NzMgMjMzLjQ2OSw2MzYuODg5IDI0Ny4zNzIsNjM2LjkzN0MyNjcuNjksNjM3LjAwNyAyODguMzYzLDYzNy4xMTMgMzA4Ljk5Niw2MzcuMTI2QzMxOC42Miw2MzcuMTMyIDMyOC4yMzQsNjM3LjEwNSAzMzcuNzk5LDYzNy4wNUMzNzguMDU2LDYzNi44MTggNDE3LjQ0MSw2MzYuMTczIDQ1Mi45NDgsNjM2LjIyMkM0NjEuNTg0LDYzNi4xNjUgNDY5Ljk5MSw2MzYuMTgyIDQ3OC4xMjUsNjM2LjIzNUM0OTkuOTgxLDYzNi4zNzYgNTE5Ljg3MSw2MzYuNzY5IDUzNi45NTQsNjM2LjY0NEM1NDIuMzQsNjM2LjYwNiA1NTMuODIxLDYzNS45NTQgNTY3LjEwMyw2MzUuNTkzQzU3MS4yNjUsNjM1LjQ4IDU3NS42MDMsNjM1LjM5NiA1NzkuOTg3LDYzNS4zNjlDNTg5LjM4Myw2MzUuMzEgNTk4Ljk4Miw2MzUuMzYxIDYwNy40NzUsNjM1LjQ4NEM2MjMuMDg4LDYzNS43MDggNjM0Ljk2MSw2MzYuMTE4IDYzNC45NjEsNjM2LjExOEM2MzUuMjU5LDYzNi4xMjkgNjM1LjU1LDYzNi4wMTkgNjM1Ljc2Nyw2MzUuODE0QzYzNS45ODUsNjM1LjYwOSA2MzYuMTExLDYzNS4zMjYgNjM2LjExOSw2MzUuMDI3QzYzNi4xMTksNjM1LjAyNyA2MzguMzUyLDU1My4xODEgNjM5LjIyLDQ0OS4wMjlDNjM5LjcwNywzOTAuNTMzIDYzOS43NTksMzI1LjAwNCA2MzguNzU2LDI2Mi45ODVDNjM4LjQ2OCwyNDUuNzkgNjM4LjU3MiwyMjguODY2IDYzOC4zNzUsMjEyLjQzNkM2MzguMjg3LDIwNS4wOTEgNjM4LjEzNiwxOTcuODQ1IDYzNy44NywxOTAuNzE3QzYzNy43MDIsMTg2LjQ1MSA2MzcuNDQxLDE4Mi4yMjcgNjM3LjEzNywxNzguMDVDNjM2LjQwNCwxNjcuOTg4IDYzNS40MTcsMTU4LjE5OSA2MzQuODgzLDE0OC43NDJDNjM0LjYwNiwxNDMuODM3IDYzNC42NDksMTM5LjAyMiA2MzQuODUxLDEzNC4zMDZDNjM1LjM3LDEyMi4yMSA2MzYuOTIzLDExMC43NTEgNjM2Ljk0MywxMDAuMDcyQzYzNi45NDYsOTguMzM0IDYzNy4wMTksOTYuNjE4IDYzNy4xMzUsOTQuOTI0QzYzNy42NDksODcuNDA3IDYzOC45NzQsODAuMzA0IDYzOC45ODMsNzMuNjcyQzYzOC45ODgsNjkuNjQ4IDYzOC45MjcsNjUuNzk4IDYzOC44MzQsNjIuMTMyQzYzOC41NjcsNTEuNTk4IDYzOC4wMyw0Mi41OTggNjM4LjA0NywzNS40MTFDNjM4LjA1NSwzMS44ODggNjM4LjE3MSwyNy4yMDggNjM4LjMyNywyMi41MUM2MzguNjQ4LDEyLjg0OCA2MzkuMTMsMy4xMDUgNjM5LjEzLDMuMTA1Wk02MzQuNzQ5LDUuNDMyQzYzNC41ODQsOC45NjUgNjM0LjI4MywxNS42ODQgNjM0LjA1NCwyMi4zNjZDNjMzLjg5MSwyNy4xMTIgNjMzLjc2MiwzMS44MzggNjMzLjc0OCwzNS4zOThDNjMzLjcxOSw0Mi42MTYgNjM0LjI0LDUxLjY1OCA2MzQuNDksNjIuMjM5QzYzNC41NzYsNjUuODY4IDYzNC42MjksNjkuNjggNjM0LjYxNyw3My42NjJDNjM0LjU5Nyw4MC4yMDQgNjMzLjI2MSw4Ny4yMDYgNjMyLjc0Myw5NC42MkM2MzIuNjE4LDk2LjQxMSA2MzIuNTM5LDk4LjIyNSA2MzIuNTMzLDEwMC4wNjFDNjMyLjUsMTEwLjY4NCA2MzAuOTM0LDEyMi4wOCA2MzAuNDAyLDEzNC4xMTJDNjMwLjE4OCwxMzguOTczIDYzMC4xMzksMTQzLjkzNiA2MzAuNDE5LDE0OC45OTFDNjMwLjk0MiwxNTguNDcyIDYzMS45MTgsMTY4LjI4NyA2MzIuNjQsMTc4LjM3NUM2MzIuOTM1LDE4Mi41MDMgNjMzLjE4OCwxODYuNjc2IDYzMy4zNDksMTkwLjg5MkM2MzMuNjMzLDE5Ny45ODIgNjMzLjc5OCwyMDUuMTkxIDYzMy45MTEsMjEyLjQ5N0M2MzQuMTY0LDIyOC45MzMgNjM0LjE0MSwyNDUuODY0IDYzNC41LDI2My4wNjVDNjM1LjgzMSwzMjUuMDQ3IDYzNi4xMTcsMzkwLjU0MyA2MzUuOTQ3LDQ0OS4wMUM2MzUuNjY2LDU0Ni4wMDkgNjM0LjExNiw2MjMuNjY1IDYzMy45MDUsNjMzLjg0MUM2MzAuMTE5LDYzMy43MDkgNjE3LjI5LDYzMy4yNzggNjAyLjAxNCw2MzIuOTY4QzU5NC45NzYsNjMyLjgyNSA1ODcuNDE4LDYzMi42OTUgNTc5Ljk4Niw2MzIuNjUyQzU3NS41ODMsNjMyLjYyNyA1NzEuMjI0LDYzMi42NiA1NjcuMDQyLDYzMi43MjNDNTUzLjc4Nyw2MzIuOTI1IDU0Mi4zMjUsNjMzLjQ0IDUzNi45NSw2MzMuNDE0QzUxOS44OCw2MzMuMzI2IDUwMC4wMTIsNjMyLjY4NSA0NzguMTc1LDYzMi4yN0M0NzAuMDI1LDYzMi4xMTUgNDYxLjYwMSw2MzEuOTkyIDQ1Mi45NDcsNjMxLjk0QzQ0My41OTUsNjMxLjk0NiA0MzMuOTc0LDYzMS45ODggNDI0LjEzOSw2MzIuMDc5QzM4Ny43NTksNjMyLjQxNCAzNDguNDUxLDYzMy4yMTMgMzA4Ljk4OSw2MzMuMzcxQzI4My4xMjQsNjMzLjQ2IDI1Ny4xOTMsNjMzLjQ5MyAyMzEuOTc5LDYzMy40MDZDMTYwLjI3Myw2MzMuMTU5IDk0LjM3MSw2MzIuMzIzIDUyLjI2Nyw2MzIuMTc4QzQzLjA5Nyw2MzIuMTcyIDM0Ljk1Nyw2MzIuMjQ5IDI4LjA5NCw2MzIuMzg4QzE2Ljk5Niw2MzIuNjEzIDkuMjMxLDYzMi45NTIgNS44MzUsNjMzLjExOUM1Ljk1Miw2MjguNzY5IDYuMjM2LDYxNy43NjMgNi40MjYsNjA2LjgyN0M2LjU0NSw1OTkuOTY0IDYuNjI4LDU5My4xMjkgNi42MDksNTg3Ljk4QzYuNTgzLDU4MC45MjcgNS40NDYsNTcyLjIwMiA0LjgzLDU2Mi4wNTNDNC42MTcsNTU4LjU0OCA0LjQ2Nyw1NTQuODcyIDQuNDQ5LDU1MS4wMzVDNC40MjQsNTQ1LjQ2MiA0LjMyOCw1MzkuNTUzIDQuNDE2LDUzMy4zNDFDNC41OTQsNTIwLjczMSA1LjM4NSw1MDYuODk2IDUuNyw0OTIuMDU5QzcuMTIzLDQyNS4wMTggNy42MTUsMzM3Ljk3IDcuODExLDI1Ni4wNTdDOC4xMjUsMjAwLjk4MyA4LjA5MiwxNDguMjI0IDcuOTUsMTA1LjQwN0M3LjkyNyw5OC40MzcgNy45Miw5MS43MzEgNy44NzQsODUuMzIxQzcuNTc0LDQzLjQ3OSA3LjA1OCwxNC4yNjggNi45MTgsNi44MzZDMTIuNTg0LDYuNjk5IDMwLjE5Myw2LjI4NCA0Ny42ODQsNS45NzZDNTguMDMyLDUuNzkzIDY4LjMzOSw1LjY0OCA3Ni4xMDIsNS42MkM4NS40OTEsNS41ODYgOTcuNjc2LDYgMTEyLjA3Nyw2LjUwNUMxMTkuNTI0LDYuNzY1IDEyNy41NjEsNy4wNzQgMTM2LjExMSw3LjNDMTQ0LjI2LDcuNTE2IDE1Mi44NzUsNy42NzggMTYxLjg4OCw3LjcyMUMxNzQuNzYxLDcuNzgxIDE4OS43NDgsNS44OTQgMjA0LjU0OSw1LjE4NUMyMDguMDk0LDUuMDE1IDIxMS42MjcsNC45MTMgMjE1LjExOCw0LjkyNEMyMzUuNzQyLDQuOTkyIDI1OS4zODMsNy42NzIgMjgyLjQwMSw4LjgxNEMyODguMTA4LDkuMDk3IDI5My43NzgsOS4yODYgMjk5LjM1NCw5LjMxOUMzMTAuNzg4LDkuMzY3IDMyMi4zMDksOS4zMzQgMzMzLjg0Nyw5LjIwNEMzNjAuODY0LDguOTAxIDM4Ny45NjgsOC4yMTkgNDE0LjI0NCw4LjAzNkM0MjcuNDU0LDcuOTQzIDQ0MC40NTQsNy45ODEgNDUzLjEyOCw4LjEzNUM0ODYuMzQ2LDguNTM4IDUxNy4zMjIsOS41MzYgNTQzLjk2Miw5LjQ0QzU1NC4xMTgsOS40MDYgNTYzLjUzNSw5LjE5NCA1NzIuMTY5LDguOTA0QzU4OS41MTEsOC4zMjIgNjAzLjY5Miw3LjQyNSA2MTQuMzY1LDcuMDJDNjE4LjU1OCw2Ljg2MSA2MjIuNDc0LDYuNiA2MjUuODQsNi4zMjFDNjI5LjYzNiw2LjAwNyA2MzIuNzM2LDUuNjcxIDYzNC43NDksNS40MzNMNjM0Ljc0OSw1LjQzMloiLz4KPC9zdmc+Cg==') 10 stretch;
  border-image-outset: 10px;
}

<div class="comicbox">Hello there</div>

对于图像 a 可以使用 css 属性调整图像渲染image-rendering。但这对边框图像有何作用？您可以在边框图像上看到一些楼梯。它以某种方式磨损。对此有什么想法吗？

请注意：我不想为此使用 javascript 或任何外部库。我只想锐化图像。

标签： htmlcss

Answer 1

不管你做什么：

• 将其设置为 Base64 编码的 SVG 边框图像
• 将其设置为 Base64 编码的 SVG 背景图像（示例如下）
• 设置固定宽度和高度以匹配两者
• 添加shape-rendering属性
• 设置 CSSimage-rendering属性
• 添加preserveAspectRatio或geomtericPrecision

你将无法锐化它。在这种情况下也image-rendering无济于事。即使shape-rendering设置为geomtericPrecision它仍然呈现像素化https://svgur.com/i/YHh.svg

我确实尝试了几个修复，到目前为止，在将 SVG 文件边框重新制作为黑色路径并preserveAspectRatio="xMaxYMax slice"在删除时添加属性之后width，height我得到了最清晰的版本，它仍然显示了较小尺寸的一些步骤。这是最后一个例子：https ://svgur.com/i/YGr.svg

.comicbox {
  width: 593.95px;
  height: 593.14px;
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 593.95 593.14' shape-rendering='geometricPrecision' preserveAspectRatio='xMaxYMax slice'%3E%3Ctitle%3Eborder-image%3C/title%3E%3Cpath d='M3.47,4.18s63.92-1,71.29-.88S120.05,4.85,131.28,5s35-.54,57.48-2.28,43.76,2.18,67.75,2.86,84.95.21,95.6,0,73.48.19,92.84.35,21.19,2.64,75.35.31,71-3.92,71-3.92.18,59.28,0,62.51S590.83,71,590,81.09s-.93,18.09-1.61,26.57-1.37,16.51-1.33,21.94.4,12.62.84,18.06.38,3.61,1,12.65,1.58,35.36,1.67,49.29.55,46.2.67,55S592,365.21,592,375s-.86,118.46-.93,123.87-1.62,91.27-1.62,91.27-39,.5-56.24,0-57.82-.27-78.71-.54-69.94-2-92.9.13-147.1.57-162.84.49-52.65-.32-92.13-.57-104.09.49-104.09.49S6.39,553.09,5,550.5s-1.78-20.14-2.42-25.29S1.92,473.34,2,468.7s.93-37.42.93-37.42l.41-74.07s2.61-69.16,2.63-73.28.3-81.55.3-81.55L3.88,45.73Z' transform='translate(0.56 -0.07)' style='fill:%23ffcd03;fill-rule:evenodd'/%3E%3Cpath d='M3.29,4A8.47,8.47,0,0,1,4.62,3.9l1.15,0,2.29-.05,4.6-.12,9.19-.23L40.22,3,58.6,2.67l9.2-.15c3,0,6.15-.11,9.21,0l36.75.84,18.36.42c6.1,0,12.22-.14,18.33-.34q18.35-.64,36.64-2.08A173.17,173.17,0,0,1,205.6.78c6.18.12,12.32.51,18.44,1,12.25.92,24.4,2,36.6,2.11S285.11,4,297.36,4s24.5-.12,36.75-.25l18.35-.25,18.39,0,73.58.2c6.18,0,12.39.39,18.47.75S475.05,5,481.15,5c12.2,0,24.43-.38,36.65-.87l36.7-1.66C566.72,1.83,579,1.21,591.11.25l2.28-.18V2.32l-.08,36.76-.1,18.38-.05,4.61,0,2.35c0,.83-.12,1.55-.17,2.33l-.77,9.18c-.53,6.14-1,12.17-1.31,18.29l-.53,9.2c-.2,3.07-.49,6.14-.74,9.18-.49,6.1-1.08,12.19-1,18.2s.36,12.19.85,18.26,1,12.25,1.23,18.38.46,12.26.64,18.39.3,12.26.37,18.39l.13,18.39.33,36.75.17,36.76.43,73.52c.09,6.13,0,12.25,0,18.38l-.11,18.38-.22,36.76-.22,36.76-.07,18.38-.24,18.37-1,73.51,0,1.33-1.34,0q-18.35.3-36.7.39c-6.12,0-12.24,0-18.38-.1s-12.2-.19-18.31-.21c-24.45-.09-48.9.26-73.4-.21-12.23-.22-24.45-.46-36.66-.53s-24.42-.06-36.54.56c-3.06.14-6,.43-9.08.64-1.55.1-3.12.23-4.66.3l-4.61.18c-6.14.22-12.26.33-18.38.42q-18.37.24-36.72.24c-24.47,0-48.93-.11-73.39-.28s-48.9-.27-73.36-.39l-36.69-.18c-6.11-.06-12.22,0-18.34,0l-18.33.09-73.34.34-3,0,.3-3q.95-9.07,1.72-18.18c.25-3,.49-6.07.69-9.09s.37-6.06.36-9c0-.72,0-1.44-.08-2l0-.13v-.06c0-.05,0,0,0,0a.64.64,0,0,0,.12.25l-.2-.48A7.49,7.49,0,0,1,2,549.72a44.18,44.18,0,0,1-.68-4.86c-.29-3.12-.47-6.18-.65-9.24S.35,529.5.1,526.56L0,525.5l-.1-1.28c-.06-.83-.08-1.58-.11-2.37l-.12-4.62c-.21-12.26-.21-24.47-.22-36.7,0-6.09,0-12.25.23-18.35l.51-18.32c.44-12.22.43-24.44.56-36.65l.31-36.66.08-9.16.05-4.58.18-4.58.71-18.3,1.43-36.6.36-9.15L4,283.6l0-4.58.15-18.32.32-36.64.16-18.32c0-3.06,0-6.11,0-9.16l-.09-9.16L4.2,150.77,3.55,77.48,3.28,40.79Zm.36.35L6.73,150.75l.73,36.65.19,9.16c.06,3.05.14,6.11.12,9.16l0,18.33,0,36.65v22.91l-.14,4.58-.3,9.17L6.21,334l-.6,18.32-.16,4.58,0,4.58,0,9.16-.09,36.65c-.05,12.21,0,24.43-.33,36.63l-.4,18.32c-.18,6.11-.14,12.17-.13,18.29,0,12.2.08,24.43.32,36.59l.13,4.54c0,.74.06,1.52.11,2.21l.07,1,.13,1.22c.28,3.15.43,6.18.62,9.23s.37,6.07.66,9c.15,1.46.32,3,.58,4.21a4.62,4.62,0,0,0,.16.61.13.13,0,0,1,0,.06,7.61,7.61,0,0,1,.31.79,1.41,1.41,0,0,1,.08.32l0,.22.07.43a24.87,24.87,0,0,1,.14,2.6c0,3.21-.17,6.26-.35,9.34s-.42,6.14-.67,9.19q-.75,9.17-1.68,18.3l-2.68-2.94,73.41-.34,18.35-.08c6.11,0,12.23-.09,18.34,0l36.69.27c24.44.21,48.92.35,73.37.65s48.91.48,73.35.53q18.35,0,36.66-.11c6.1-.07,12.21-.16,18.29-.35l4.55-.16c1.51-.07,3-.18,4.5-.27,3-.18,6.17-.48,9.22-.59,12.31-.55,24.56-.49,36.81-.35s24.48.46,36.7.75,24.42.4,36.65.47l36.69.3c6.12.07,12.25.17,18.37.37s12.2.23,18.3.27q18.33.1,36.67-.05l-1.36,1.35,1.6-73.49.4-18.37.21-18.38.33-36.75.33-36.75L591.1,388c0-6.12.16-12.25.09-18.37l-.5-73.51c-.09-12.25-.18-24.5-.35-36.75l-.57-36.75-.32-18.37q-.19-9.18-.55-18.35c-.23-6.12-.49-12.24-.82-18.34s-.81-12.17-1.41-18.28-.9-12.27-1-18.44.41-12.38.84-18.5c.23-3.06.48-6.1.65-9.14l.44-9.15c.25-6.12.67-12.31,1.14-18.38l.68-9.15c0-.75.14-1.55.14-2.25l0-2.24V57.45l-.08-18.37-.24-36.75,2.27,2.06c-12.31,1-24.51,1.71-36.77,2.4S530.24,8,518,8.56s-24.54.92-36.85.91c-6.16,0-12.34-.18-18.49-.54s-12.18-.76-18.26-.79l-73.47-.37-18.37-.11-18.41.15q-18.39.11-36.78.06c-12.26,0-24.52-.08-36.8-.38S236,6.06,223.79,5c-6.1-.51-12.18-1-18.26-1.13a173.15,173.15,0,0,0-18.22.4Q168.94,5.6,150.53,6.06c-6.14.15-12.27.26-18.43.18s-12.25-.43-18.38-.65L77,4.22c-3.07-.16-6.09-.12-9.16-.14l-9.19,0-18.38.11-18.38.11-9.19,0-4.6,0-2.3,0H4.63A3.63,3.63,0,0,1,3.65,4.36Z' transform='translate(0.56 -0.07)'/%3E%3C/svg%3E%0A") center center no-repeat;
}

<div class="comicbox">Hello there</div>