Css 3个图形部件中的按钮，中间部分为流体

我有一个形象：

共分三部分：

，及

我想要一个带有重复部分2的按钮，因此按钮文本（居中）是可变的。 但按钮文本应在其他部分的50%范围内

第1部分和第3部分需要一个最小宽度，我想，不幸的是，我没有有用的例子

：在

之前和

：在

之后工作不太好（使用

位置：绝对

或类似），因为重复零件必须在外部零件之间流动

有什么想法吗？格里茨。

更新并完全更改：

感谢下面的评论，让我有了“想法灯泡”，因此在评论中有了“除非…”部分

这个新的解决方案在CSS和HTML中更加简洁，代码更少，不需要担心位置：绝对，不需要额外的混乱，只需简单地使用“多背景”（1）以及

calc（）

（2）函数和

最小宽度

技术。但首先，代码和注释将解释：

.test类{
/*因此div可以展开以包含文本和填充*/
宽度：自动；
/*最小宽度=173像素左图像宽度+199像素右图像宽度*/
/*没有这个，它就会崩溃*/
最小宽度：372px；
填充：0 20px 0 10px；/*只是为了在侧面留出空间*/
线高：148px；
颜色：白色；
字体大小：24px；
/*没有彩色背景，因为图像是带有alpha的PNG*/
背景色：透明；
/*设置多个图像，中间的“可扩展”一个作为第三个背景*/
背景图像：url（'//i.stack.imgur.com/mYxcX.png'），
url（'//i.stack.imgur.com/TlpN0.png'），
url（'//i.stack.imgur.com/GMhMi.png'）；
/*将“不重复”设置为“全部”，即使是可扩展的，否则它将显示在
其他两张图片，我们不重复，但稍后控制其大小*/
背景重复：不重复，不重复，不重复；
/*将每个图像定位到相应的位置，中间为46.5%
图像是因为左侧图像的宽度小于右侧图像的宽度*/
背景位置：左中、右中，46.5%50%；
/*最后给出侧面图像的精确像素大小，而
中间的一个我们使用calc（）函数，所以中间的宽度大小
图像=全div大小（100%）-左右图像的宽度值（173+199）*/
背景尺寸：173px148px，199px148px，计算（100%-372px）148px；
显示：内联块；
文本对齐：居中；
}

主页
关于公司
仅用于演示的虚拟文本示例

已更新并完全更改：

感谢下面的评论，让我有了“想法灯泡”，因此在评论中有了“除非…”部分

这个新的解决方案在CSS和HTML中更加简洁，代码更少，不需要担心位置：绝对，不需要额外的混乱，只需简单地使用“多背景”（1）以及

calc（）

（2）函数和

最小宽度

技术。但首先，代码和注释将解释：

.test类{
/*因此div可以展开以包含文本和填充*/
宽度：自动；
/*最小宽度=173像素左图像宽度+199像素右图像宽度*/
/*没有这个，它就会崩溃*/
最小宽度：372px；
填充：0 20px 0 10px；/*只是为了在侧面留出空间*/
线高：148px；
颜色：白色；
字体大小：24px；
/*没有彩色背景，因为图像是带有alpha的PNG*/
背景色：透明；
/*设置多个图像，中间的“可扩展”一个作为第三个背景*/
背景图像：url（'//i.stack.imgur.com/mYxcX.png'），
url（'//i.stack.imgur.com/TlpN0.png'），
url（'//i.stack.imgur.com/GMhMi.png'）；
/*将“不重复”设置为“全部”，即使是可扩展的，否则它将显示在
其他两张图片，我们不重复，但稍后控制其大小*/
背景重复：不重复，不重复，不重复；
/*将每个图像定位到相应的位置，中间为46.5%
图像是因为左侧图像的宽度小于右侧图像的宽度*/
背景位置：左中、右中，46.5%50%；
/*最后给出侧面图像的精确像素大小，而
中间的一个我们使用calc（）函数，所以中间的宽度大小
图像=全div大小（100%）-左右图像的宽度值（173+199）*/
背景尺寸：173px148px，199px148px，计算（100%-372px）148px；
显示：内联块；
文本对齐：居中；
}

主页
关于公司
仅用于演示的虚拟文本示例

现代可能性是使用边框图像

但如果你想得到更广泛的支持，就要有背景。 问题是重复的bkg很难确定大小。所以，最好在伪元素中处理它

.test{
最小宽度：200px；
文本对齐：居中；
线高：90px；
显示：内联块；
利润率：20px；
高度：100px；
填充：0px 20px；
字体大小：30px；
颜色：白色；
背景图像：url（'//i.stack.imgur.com/mYxcX.png'）、url（'//i.stack.imgur.com/TlpN0.png'）；
背景尺寸：自动100%；
背景重复：无重复；
背景位置：左上、右上；
位置：相对位置；
}
.测试：之后{
内容：“；
位置：绝对位置；
背景图像：url（'//i.stack.imgur.com/GMhMi.png'）；
背景尺寸：自动100%；
左：90px；
右：100px；
顶部：0px；
底部：0px；
z指数：-1；
}

测试
长期测试
更长的测试时间

现代可能性是使用边框图像

但如果你想得到更广泛的支持，就要有背景。 问题是重复的bkg很难确定大小。所以，最好处理我的问题