html - 如何在菜单项周围创建 'Drawn' 样式线

Question

我正在为 wordpress 制作一个菜单，我正在尝试获得一个“画出”像边框一样围绕着不同的菜单项。

至于现在，我有一个带有“绘制”圆圈的背景。 (我们称之为 bg.png)。

我可以得到一个菜单项周围的圆圈并将其正确放置。但当然有些我的菜单项词比其他词长。

这就是我现在使用菜单事件部分的方式:

url('img/bg.png'); 
background-repeat: no-repeat; 
background-position-y: 10;

悬停菜单项时会显示圆圈，但在某些单词上也会显示圆圈大或太小。这类似于我正在使用的 png:http://instantsplash.com/a/images/hand-drawn/circles/04.png

提前致谢!

Answer 1

我在以前的工作中遇到过类似的问题。

您必须决定是想要一张在某些元素上可能太大的大图像，还是想要一张小图像，如果文本较大，有时会与您的元素重叠。

另一种解决方案是在 css 中使用 background-size 属性并将图像拉伸(stretch)到容器的大小。但这种解决方案可能会导致比率或图像质量问题。