jquery – 重用现有的按钮代码在html中创建许多按钮？

2023年8月20日 237次阅读

我使用锚标记创建了一个
HTML按钮,该标记由三个图像组成,如下所示：

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

结果按钮如下：

我的CSS代码：

.my_button .left {
    background: url("./images/left.png") left center no-repeat;
}

.my_button .right {
    background: url("./images/right.png") left center no-repeat;
}

.my_button .middle {
    color:#FFFAF0;
    background: url("./images/middle.png") repeat-x;
}

有没有更好的方法来创建一个组成三个图像的按钮？因为我必须在我的页面中创建10个按钮,如果我按照上述方法选择10个按钮,将会有重复的代码.你有什么建议吗？

最佳答案 您可以将所有图像合并到一个称为Sprite的图像中.然后,您可以使用background-position属性根据需要对齐它们.

使用CSS Sprite的优点是,如果您创建10个图像并且这是一种巨大的性能优化技术,那么您只对图像发出一个http请求而不是10个http请求.

您也不必担心传统浏览器,因为所有浏览器都支持后台位置.

点赞