如何让自定义 CSS 按钮根据图像自动调整大小

Question

我正在尝试使用这些图像作为按钮元素 left middle right 上 css 的基础。随着通过扩展中间部分添加更多文本，按钮需要能够调整大小（保持左右不变且不拉伸）

我目前正在使用

background-image: linear-gradient('/img/elements/button/UI-DialogBox-goldbutton-up-middle.png');

这行得通，但是我似乎找不到将左侧和右侧添加到按钮的方法。感谢任何帮助：D

Answer 1

将所有 3 个图像合并为 1 个按钮图像..

然后，上传到：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

Answer 2

我尽力了，

<style>
.background-button:before{
    content: " ";
    height: 26px;
    background-image: url('left.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 14px;
    left: -14px;
    top: -1px;
}

.background-button{
    color: white;
    height: 26px;
    line-height: 26px;
    margin: 0px 14px;
    position: relative;
    background-image: url('mid.png');
    background-repeat: repeat-x;
    z-index: 2;
}

.background-button:after{
    content: " ";
    height: 26px;
    background-image: url('right.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 14px;
    right: -14px;
    top: -1px;
}

</style>
<button class = "background-button">Long Long Long Long Long Long Long Long LongButton</button>

<button class = "background-button">Button</button>

如何让自定义 CSS 按钮根据图像自动调整大小

How to have a custom CSS button automatically resize based on an image

css

background

properties

button