html - shape-outside 不响应 alpha channel

标签 html wordpress css alpha css-shapes

我正在试验 CSS Shapes .我似乎无法使图像形状正常工作。据我所知,我的图像有一个 alpha channel ,只是浏览器没有读取它。

HTML:

<div class="container">
  <img src="http://www.kfcartography.com/wp-content/uploads/2015/05/weirdshape2.png">
  <p>Text that should be flowing around the weird shape.</p>
</div>

CSS:

.container{
  max-width: 300px;
  color: black;
}

img{
  width: 100%;
  height: auto;
  float: left;
  shape-outside: url("http://www.kfcartography.com/wp-content/uploads/2015/05/weirdshape2.png");
  shape-image-threshold: 0.1;
  shape-margin: 10px;
}

Codepen here .

原始形状是在 Illustrator 中创建的,并保存为具有透明度的 PNG-24(应该添加 Alpha channel )。我还在 GIMP 中打开它,并在那里使用蒙版并添加了一个 alpha channel (尽管它已经有一个来自 Illustrator 文件的 channel )。

我错过了什么?

最佳答案

如果您将图像编码为 base64,则不会出现 CROS 问题。

你得到的问题是它阻塞了你的 CSS 文件很多...

.container {
  width: 300px;
  color: black;
}
img {
  width: 50%;
  height: auto;
  float: left;
  shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAXk0lEQVR42u3dbWxd933Y8R+PDg8vH+6VoMqya3KJGmwDxBgbMAwm4z1gMCC+SFC/sIjOll/EUrMVhdkmyBL0TZeiyfqic2f4gU6RbpDVF5EDWXZdLAMcBzCGNJGpoXW1dKXddAkchJZlRb6SKUqirpjLvTCvR8t8Okd8uJf38wEMP0vin9T98nf+/3Nux/z8/FMBwHbUERE7Fv7oXPj72YiYi4j5W/3BU+sLsG3jkSz89VxE3IiI+nr+BAICsD3NR8QvNvInSKwxAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAC0e0Ben5yM0xMTMT09bXUAWFZ68z/4T1/9Wnzve9+LriyLiIih4eGoVCqxf3B/9A8MxMDAQOwfHIxKpWL1AATkw969WB27NjsbSZLE2XfORZqm0Zmm1awzO5amadaVZQtRGYyBgYHoH+j/ICpDw8NWFaBdA9JQr9fj2uxs4293R8QXP/gf0zTe+PsfRZZlsSNJqqWu0vEkSWK5uDQmFwDaICArmZubi7m5uUZgdkfE2FJx6dyRvpJl2WRnmkaapgtRGYjBwcEoV8qLLpGJC0BbBCRHXO5d+CMiIqbePhvJX/1lvPSdl6pJR3JmubjcOdAfg4ODH+y7ANAGAVnJ9VotIiKuzc7uXiou6V+/Fi9956VquiN9Nk3T+a4siyRJFu2xDEW5UhEXgHYLyGpxuV6rxZWrV3dHxCOL/93Zd85FkiTLxuX9PRYnxQDaMiAraWzm3xyXpU6KJUmSdZdKEeEYMkDbB2Q5K50UcwwZQEDWPS6rHUM+MDISDx857HQYQDsGZCWrHUP+2dTUK8+dODH5ybvuioePHI4DIyMuewEIyOpxuXCxeu/CH/Haa6+N3753r6kEQEDW7vLMTFyemRk7/+4FUwmAgJhKAATEVAIgIKYSAAExlZhKAAHBVAIgIKYSgA0MSN2ymEoAigRk3rJs/FTy7sVqvHX27NPPnTgx35hKDo6OWiCgpQPCJrheq8X5dy88klxM4sLFapw5c2b8D776tTg4OhqfPXLY+5wATS+xBFurXq/H5ZmZmHr77Njk370x9uSTT3b863v+RTz0wIPx/MmTFghoWh3z8/NPLf4HDz3wYP3P/vzF3170FFs2u+pJEr09PbGzXBm/bc8eUwnQMhOIqaT5ppJ5UwnQChNI/NmfvzhmAjGVAOSdQGiNqcReCWACwVQCmEAwlQAmEBOIqQTABGIqMZUAAsJaNe52/+lbU2P//X98e+wLv/35+Gf/5J/G65OTFgcQEPJNJW+fO1ebFBBAQMirdqP28BuTr1sIQEDI59rs7G4TCCAg5HZjbi5OT0xYCEBAyGdubi7q9bqNdEBAyO96rRYuYwECQm6z12cPvTU1ZSEAASH3BLL79MRpCwEICLkDYg8EEBDym5ubi0uXLsWUy1iAgGAKAQSETTF7ffaQgAACQpEJxEY6ICAUCohLWICAkJ+NdEBAMIUAAsLmspEOCAhFJxAb6YCAkN/c3JxLWICAUGgCienpaRvpgICQ37XZWVMIICDkV6vVBgUEEBByu36jdu/rk69bCEBAyD2BuIQFCAgFJpBaLaampmJ6etpiAAJCPjbSAQGhkFqtNnh6YsJCAAJCPjbSAQGh6ATiEhYgIBSYQGykAwJCUTbSAQGhEBvpgIBQiI10QEAoxKPdAQGhkGuzszbSAQGhGO+RDggIhdRqtQ4b6YCAkH8CuVF75K2ptywEICDknkBi0iUsQEDIy82EgIBQ2PVaLeyDAAJCbrVarcNlLEBAyD+B3Kg98oY70gEBocAEYiMdEBDys5EOCAiF2UgHBIRCbKQDAkKxCcRGOiAgFJxAbKQDAkKBCcRTeQEBoYh6vR5zc3M20gEBodAUUnMZCxAQcqvdqD181qPdAQEhr2uzs7tNIICAkNsNeyCAgFBEd6kUQ8PDFgIQEPLZWa6M3z960EIAAsLadWVZ3LZnTxwcHbUYgICQa/p4WjwAASHfF0SSRLmvb/6zRw5bDEBAWLtyX18MDQ/HwMCAxQAEhLXbVa6MP2z6AASEPLpLpdi3b18cGBmxGICAsHbl3r6nHd0FBIR8XwgLm+f3O30FCAi5po++vjgwMmLzHBAQ8tnlznNAQMjL5jkgIBRi8xwQEPJ/Adg8BwSEQtOHzXNAQCjC5jkgIORm8xwQEArZWa48ZvoABIRc0jSN3p6ezOY5ICDkUunrq9o8BwSE3Mq9fcc9th0QEHLp7emJffv2xdDwsMUABIRc08dj3rIWEBByaWyeH7R5vqypqSmLAALCzSp9fdWDo6NRqVQsxjL+9OgzFgEEhJuVe/uOu/djeacnJmJyctJCgICwmM3z1T35+BOmMxAQlpg+bJ6vMn2cnpiI/YP7LQYICA02z9c2fdTrdQsBAsJiNs9Xnz5ePXUqrly9ajFAQFjM5vnq08d7l6cPpWlqjwgEhAab5yt7fXIyXj11Ki5NT++2GiAgLLKzXBm3eb68Y0efifcuTx+q1+uRJH5LgIAQEe9vnneXSmHzfGlTU1Px3IkTH0wfXVkW+wcHLQwICLvKlVdsni/vqcefiCtXr3YsPn1lrUBAiIhyX9+kx7YvP308f/JkVN+79IjVAAHhw/GIT951l0syK0wfl2dmOubm5iLi/feIt1YgIEREubdv3PSRb/pw+QoEpO2laRq3790bB0ZGLMYS/vToMx+aPgABYcGucuWVAyMjvqNewvT09JLTR3epVPUe8SAgbc/m+fKOHT0ab509u+T00T/Qb4FAQNo6HjbPV5g+jh19Ji5fmXHyCgSEjwTE5vmK08c758/HtdnZj/y7rDM71u8SFghIu7J5vvr0cfG9S2NL/mZIksweCAhI27J5Xmz6AASk7dk8Xykgy08fERGdaSq8ICBtGw+b58t4/uTJVaePNE2tHQhIe9pZrtg8X8ZTjz+x4vQBCEjb6sqyuG3PHpvny0wfb7755qrTh8tXICDtOn08bfN8+emjusr00enyFQhIW34SkyR6e3rmf+sLn7cYy0wfl2dmLAYICDfr7emJT91zT7iHodj00YgwICBtp6sze+Wtqak4PTFhMRb57ssvr3n66Mqy6tDwkEUDAWkvFy5W7/3Lv35t7MFf+7fxB1/9WkxPT1uUeP++j6qTVyAgrOzK1avxs7fPjn3961+P+z79mbafRk5PTMQPvv/9Ne99JB3JGV9FICBta25uLs6+c27szN/8sO2nkScffyIuX5k5tNb/PsuyyaHhYV9EICDt7b3p6baeRk5PTMSrp07Fpenp3b4aQEC4xWnkyccfb6vp473L04fq9bovBBAQbnUaefQ/Pxq/+unPxOuTk6aPJXSXSm4kBAFhqWlk6u2zY6dePXXoVz/9mW09jbxw8vnC04e7+EFAWEb10qXdU9t4GpmamornTpyw9wECwka4Xqtt22nkqYJ7Hy5fgYBQcBp56IEHY2pqquWnj+dPnozpmZlC04fLVyAgFJhGXvrOS4fu+/Rn4pmjR1t6+rg8M9MxNzfnEwsCwmZOI2/8/Y/Gfv8rv9eS00hj+qi+d+mRIv9/lmUeRAkCQlHXZmfjZ2+fHXv55ZcHW20audXpY0eSVPsH+n0RgIBQVL1ejwsXq/e20jQyPT19S9MHICBs4DTy3Zdfbtpf67GjR2957yPrzI71u4QFAsL6TyO/8bl/F7/573+j6R7MOD093Xhk+y1NH0mSZPZAQEDYgGnkp29Njb344ou1f/Mv/1VTTSPHjh6Nd86fDyevQEBo4mnk3M/Pf/FHP/6/TTONNKaPi+vwhlGdaeo+EBAQNtKVq1ebZhppTB/XZmdv+cdK09Sd6JDfDgHhlqaRrXjTqvWcPoBCOkwg3PI0Mj4+XtvsN6367ssvr+v04fIVFPILAeGWp5HNfgvdpx5/Yt2mj06Xr6CIeRMI62Iz30L3+ZMn48c/+cm6TB/ArREQ1sXNb6G7UdPIwiPb123vI0n8FgABoemmkYceeHBd37Tq+ZMn480334zLMzPr9mN2ZVl1aHjIJw4EhGaaRv7iB98fW883rXrq8Sei6uQVCAjtMY2s11vobsT0ERGRdCRnfKZAQGhC6/UWugvPvFr36SPLskmnsEBAaGKL30I37zRyemIi/uaHP1z36aPBfSAgILTQNPLQAw+u+U2rnrT3AQICjWlk8u/eGPvK7/7HVd+06vTERLx66lRcuXp1Q34t3aWSGwlBQGi1aeTsO+dWfQvdJ9+/7+Peer2+Yb8Wl7BAQGgxq72FbmP6uDQ9bUQAAYGPWvQWuj2Lp5GNnj66S6XwToRQXGoJaKJp5MiVa1fj97/ye+P/a+L0pkwf3gsdTCBss2nkhRdeuLTRex+ACYRtOI2cf/fC7270z5NlmUtYYAKB/HYkSbV/oN9CgIAAICCwCdId6bNl94CAgEDugKTp/KC70EFAABAQ2BSdaeoxJiAgkF+aph6kCAICgIC0ysIlSSSJ5Wvlzx8gIFuiK8viztvvGE9TN/O36udvaHjYQoCAbL7uUql625498Q9++c7xriyzIICAsHYPHzkcjz72X+LO2+8YL/f1WZBW+sJ3CQsEZKuUukrH9w8OxsHR0fjGf/uv8Q9/5RPjOx0JbRldWVYdGh6yECAgW6NxD8GBkZH45reejU98fN/43l/a87SVAQSEZXWXSh+6h2D/4GD8z+//Rdx9993zd95+x7hLJICAsOoEsvjvv/mtZ+O+++5zQqvJNS5BAgKypdPHzRH54z/5Rhw6dMgJrRb7BgAQkKZ48fnDP3rUCS1AQPjIBFJdy2PAndBqzSkSEJANVa6U1/TfOaHVulMkICDrLu8GrBNagIDw/qIlSe7vXp3Qah5dWRYDAwMWAgRka16Ailw/d0Kreb4B6BcQEJCtePFpxKAoJ7QAATF9FOaE1tbJXMICAdmqCWS9Tu84obU1diTJz/sH+i0ECMimTyBrugdkrZzQ2hJXLAEIyOYvWEdyZq33gKyVE1qbK92RHi+7bAgCstmyLJvciDuYndDaxICkaWXQXeggIJu+YOu4B7IUJ7QAAdmmurIshoaHN/TncEJrY3WmqceYgIBs/vSxWZzQWn9pmsbuXbsm0zT1IEW4dZmANNn0sZgTWuuju1SKvb+0Z/zj/QPjn/v1z73yzW89a1FgHV6iHPdp0gmkoXFC63e+9OX49re/PX7u5+fH5ubmfDLW8Lnq7emJneXK+G179sTDRw7H/aOjbiCEdXppioh/LiD5JpDq0PDQlkTkj//kG1H50pfjuRMnxs++c27seq3mE7KENE1jV7nySrmvb/JT99wT948ejIOjoxYG1tevRMQLApLnu9qO5MxW/vx/+EePxt3DQ/HlL/6H8QsXq2OXZ2Z8Uhb09vREubfvsd6enuzg6Gg8fOSwfQ7YGN0R8X8i4hcCkkOWZZObuQeylIOjo1GpVOJ3vvTl8Z/89M2x96an2zfoSRLlvr7YVa6M79u3Lz575HDWWB9gw1z7YOK3FvlesJrBgZGRGPjWQDz0wIPjb50923H+3QuPtNPnoSvLYme58nRvT8/8p+65Jx4+cjgOjIz4AoVNJiA5X7i2egJpaJzQeuiBB+dfe+218XM/Pz9Wr9e39fqX+/qi3Ns3fvvevXFwdDQ+e+SwTXEQENNHEe1wQitN06j09VXLvX3H9+3bF7/1hc/HgZERl6lAQEwf6xGR7XhCq7tUinJv39Plvr75g6Ojcf/owaZcfxAQWnICWWw7nNBy7wYIyHadQLbkHpA8WvWElns3QEC29wSyxfeArFUrndBq3Lvxy3fckR0YGXHvBgjI9tQM94CsVTOf0HLvBghI+00gLfYgw2Y7odW4d6Pc1zd/YGQk7h896N4NEJD20KynsFaLyFaf0HLvBgiI6aOFbfYJrca9GzvLleOfvOuuD+4Ud5kKBMT00YI244SWezdAQNhmE0jDRpzQaty7sXvnrvF9+/bF/aMH3bsBAsKiCaTp7wFZq/U6oeXeDUBA1vJddovcA7JWt3JCq3Gn+O1794Z7N0BAWEUr3QOSJyJrPaG1xL0b4d4NQEDWMoFskz2Qpax0Qsu9G4CA3KLtcAprJTef0KrX6+7dAATE9LE2i09o9Q8MuHcDEBDTx9rtHxyM1374v33SgbV9g20JTCAAArIxE8i72+UeEAAB2cwF6khc0wEQkPy24z0gAAKyGQtkDwRAQIpop1NYAAJi+gAQENMHgICYQAAEpG0mkKp7QAAEJLd0R/qsVQAQkPwBSdN5eyAAApJbZ+pZkwACUmwCcQoLQEDyxwMAAcmt0/QBICAmEAAB2cwJxD0gAAJSYALZkT5b9n7gAAKSOyBpOj84OGghAAQkn840jYoJBFrt9azDMghIM0wgsd8EAq2ia+H1bN5SCMiWx8P0AS2jLyK6I2LOUgjIlus0fUCrqETEP4qIaUshICYQYK26I+K+iPhxRNQth4A0ywRS3T+430JAc792/eOI+IHpYwu/2bYESyyKe0Cg2dUj4m/DvocJpOkC4h4QaAXiISDNxz0gAAJSdAJxCgtAQPLHw/QBICC5uQcEQECKLUhiSQAEpICuLPM+IAACAoCAbJJSV+m4PRBgCR4VLyCrcwoLWIJHxQvIyrqyLPoHBiwEgIDkXJAkiQEBARCQPNLUsyUBBKSAzjSNoeFhCwEgIAAIyCboLpWqHuMOICCFlCtliwAgIPlkndkxR3gBBCT/YiRJ5ggvgIDk5p0IAQSkEO9ECE3Dc6cEpIUWwvuAQNN8LxeeOyUgraQry0wfsPWyiJizDALScux/wJbqiIiaZWgZnQLS+LYnyzxEEbaWy1atFfuSgCzYkSTV/oF+CwGwhu+5I+KygCxId6TPll3CAlj15TIirkfYA/n/K5Km856DBbCiJBYdchCQxkI4xguwmvrNNSHeP8brvUAA8o0jACAgRXSXSm4iBBCQYtxECCAguaWewgsgIEV0pml1/+B+CwEgIDkXoSM5YxUABCS3LMsmHeEFEBAABGRzOMYLICCFOYUFICC5dHkfEAABKbQASRL9AgIgIEUCAoCA5NaVZdWh4SFfCQACAoCAbIJSV+m4I7wAAlKII7wAApJbV5Y5hQUgIAUWIEncBwIgIPl4HxAAASmkM009AwtAQAp88G4iBBCQIrqyrDpoAgEQkCLKlbKvAgABySfrzI45wgsgIPk/+CTJHOEFEJDcOh3jBRCQIlLHeAEEJPcH7ggvgIAU0ZVlMTQ87CsAQEAAEJBN0F0qVZ3AAhCQQvoH+n0FAAhIPumO9NmyI7wAApI7IGk67zlYAAKS/wN3jBdAQIpwjBdAQAAQkM3RXSp5hAmAgBTjIYoAApJblmXhJkIAAcltR5JU3UQIICD5P+iO5IxPPYCA5JZl2aQjvAACkkuapm4iBFiP19N2CEZ3qRTdXaWnu0ul+d27d8fQ8LBjvAACsnIw0jSNAyMjcffwUAwLB4CANCRJ0gjGK709PZNpmsbQ8HAMDQ8t/NleB4CA3BSMUqk02XimlWAACIhgAAjI+gRj/+BgHBg5IBgAAvJh3aVSdJdK1Z7unuONYAwPD8fdC1OG51YBCMiHglHqKh1vPBlXMAAERDAABGR9gjEwMPDBvRiCASAgH+jKsii9v/H9WG9PTzYwMBBDiyYMj04HEJCPBKO7VMo+9rGPNYKRCQaAgAgGAPkCkmVZZFn2QTB27drV2MMQDACWD8gnPr5vvDFheAAhAEvpmJ+ff2rxP5iamjJhALCqj7yzkngAUCggACAgAAgIAAICgIAAICAAICAACAgAAgKAgADQ5lJL0FQxTyKiY9E/m1/hv+/I+ePPL/w/86v8eIv/u/X483IfS+Pv66t8nBupIyJ2LPrrpT6Gxq/1F75EQUCaVX1RSDqWeFFfLgh5XixjmRfIxT9HxyovqEUjcvPP17Ho492KiCQL8Vjp17z494eAgIA0fUTqlqFp1vqGZYKVvwsDAAEBYPMC0mEZACgSkE7LAECRgNxuGQDI6/8B9B8OIZMesDcAAAAASUVORK5CYII=");
  shape-image-threshold: 0.7;
  shape-margin: 2px;
}
<div class="container">
  <img src="http://www.kfcartography.com/wp-content/uploads/2015/05/weirdshape2.png" /><span>Text that should be flowing around the weird shape.</span>
</div>

关于html - shape-outside 不响应 alpha channel ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30444087/

相关文章:

html - 我可以有一个没有链接的导航元素吗?

python - 使用 Flask 上传图像并将其显示为响应

html - 居中覆盖顶部 div 底部的中间 div 内容和垂直堆叠的底部 div 顶部

css - 在 body 背景图像上方显示带有渐变的日落效果

javascript - 响应 onClick 接收内联样式

html - CSS 图像作为具有叠加渐变颜色的背景

css - 在中心对齐可变宽度的 div

javascript - 将父级的页面标题标签用作所有子级的标题标签

php - 多次刷新页面时读取文件变慢

javascript - 如何渲染容器轴的所有值?