我在试验CSS Shapes。我似乎无法让图像形状起作用。据我所知,我的图片有一个alpha通道,只是浏览器没有读取它。
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;
}
原始形状在Illustrator中创建并保存为具有透明度的PNG-24(应添加Alpha通道)。我也在GIMP中打开它并在那里玩了一些掩码并添加了一个alpha通道(尽管它已经有一个来自Illustrator文件)。
我错过了什么?
答案 0 :(得分:1)
如果您将图像编码为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>