gpt4 book ai didi

jquery - 将自定义图像添加到 jquery 按钮

转载 作者:行者123 更新时间:2023-12-01 07:54:12 34 4
gpt4 key购买 nike

我正在尝试使用 JQUERY 将图像添加到按钮,我在示例 https://forum.jquery.com/topic/custom-icons-on-jquery-ui-button 中尝试了相同的操作,但它不适合我。我的笨蛋的链接 http://plnkr.co/edit/PjsMCzsR0fAG2sGo6utK?p=preview

更新了图像文件的 URL。这是我的代码

    <!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<style>
.ui-wp-icon {
background-image: url(http://findicons.com/files/icons/1714/dropline_neu/128/edit_undo.png) !important;
}
</style>

<script>

$(document).ready(function(){
$( "#wpbutton" ).button({
icons: { primary: "ui-wp-icon"}
});
});

</script>
</head>
<body>
<button id="wpbutton">Wordpress</button>
</body>
</html>

最佳答案

首先,按钮上的 .ui-icon 类将背景位置设置为 16px 16px。删除该类,或使用以下方法在 CSS 中覆盖它:

background-position: 0 0;

此外,您的图像比其应容纳的空间大得多。您只能看到左上角的位,它是透明的。设置背景大小以适合图标元素:

background-size: contain;

所以你的 CSS 现在变成了:

.returnIcon {
background-image: url(http://findicons.com/files/icons/1714/dropline_neu/128/edit_undo.png) !important;
background-position: 0 0;
background-size: contain
}

关于jquery - 将自定义图像添加到 jquery 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25999333/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com