为 div 生成 CSS 模式

Question

我需要为我的菜单创建一个悬停（鼠标悬停）模式，类似于此（主页上的黄色悬停模式）：

目前我正在做的是将3张图片组合在一起生成一张悬停效果图。左右图像保持原样，但中心图像设置为重复。这是因为菜单项文本可以是任意长度（例如：主页、常见问题解答和联系方式等）。参考截图：

除了使用 3 张图像之外，还有其他最佳解决方案吗？例如：在 CSS 中的 div 周围创建某种粗糙的边缘。我不确定如何做到这一点？

提前致谢。

Answer 1

您也可以使用 SVG。对于 SVG 上的悬停效果，请使用 JS 事件处理程序。
运行代码片段 来检查它是如何工作的。

function fillBG() {
     document.getElementById('banner').style.fill = "#f6c43c";
}
function fillTransparent() {
     document.getElementById('banner').style.fill = "transparent";
}

#banner {
    fill: transparent;
    transition-duration: .3s;
}

<html>

<body>
    <svg width="260" height="170" onmouseover="fillBG()" onmouseout="fillTransparent()">
        <defs>
            <filter id="filter" height="1.4" width="1.4">
                <feTurbulence baseFrequency="0.1" numOctaves="2" type="fractalNoise" result="res" />
                <feDisplacementMap in2="res" scale="70" result="res_2" xChannelSelector="R" in="SourceGraphic" />
                <feComposite in2="res_2" in="SourceGraphic" operator="atop" result="fbSourceGraphic" />
            </filter>
        </defs>
        <rect id="banner" filter="url(#filter)" width="250" height="100" x="10" y="0" />
        <foreignObject width="250" height="100">
            <h1 style="text-align: center;">
                Header Info
            </h1>
        </foreignObject>
    </svg>
</body>

</html>

为 div 生成 CSS 模式

Generate CSS pattern for div

html

css

design-patterns

background

mousehover