gpt4 book ai didi

css - 给定一个带有边框的图像按钮,如何在 CSS 中拉伸(stretch)/重复中间部分以获得可变长度的内容?

转载 作者:太空狗 更新时间:2023-10-29 12:36:37 25 4
gpt4 key购买 nike

这类似于取自 Soda Theme (Sublime Text 2) 的 Google Chrome 标签页样式:

google chrome tabs sublime text 2

您会看到它有 3 个部分:上升沿、2-3px 平坦中间、下降沿。

问:在 CSS 中,我如何“重复”中间部分并拉伸(stretch)制表符以适应字符串的大小?

图像尺寸:42 x 28。

如果有帮助,这里是 .sublime-theme 文件的片段:

    // Tab element
{
"class": "tab_control",
"content_margin": [12, 3, 12, 3],
"max_margin_trim": 0,
"hit_test_level": 0.0,
"layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png",
"layer0.inner_margin": [5, 5],
"layer0.opacity": 1.0
},

最佳答案

有多种不同的方法可以实现这种效果,具体取决于您的偏好。正如您正确假设的那样,您需要将其视为 3 个不同的部分。因此,最简单的方法是将其分成 3 个不同的图像。

解决方案还取决于您的 HTML 标记的外观。例如,如果您只有:

<a class="tab" href="#">My Tab</a>

那么你只有一个元素可以设置样式来实现它(这使得它变得更难)。

但是,如果标签周围有一个环绕元素:

<li class="tab"><a href="#">My Tab</a></li>

然后您可以使用 LI 元素来帮助实现所需的结果。

单元素

在我的第一个示例中,您只有一个“ anchor ”元素可以使用。检查您要用于选项卡的图像,我可以看到它有一些斜 Angular ,并且不是简单的平面颜色,也不是带有简单边框的平面颜色。这意味着我们无法通过直接 CSS 实现该效果,因此我们需要 CSS 来平铺图像。

你有两个选择。

选项 1

通过将图像从中间向下分割,将图像分成两幅图像,左侧和右侧。接下来,在您的图像编辑应用程序中,将您的 Canvas 向右扩展,比方说,200 像素(或者您认为选项卡的最大宽度是什么)。最后,选择最远的右边缘(这应该是选项卡的中间)并将其一直水平拉伸(stretch)到右边界。

您最终应该得到的是倾斜的左侧,然后是大约 200 像素的“中间区域”。

现在您有两个图像,我们将调用 tab-left-side.pngtab-right-side.png。有了这两张图片,你就可以用下面的CSS来实现tab的效果了:

.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}

.tab:after {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}

选项 2

此选项需要将您的图片拆分为三张图片。您将拥有 tab-left-side.pngtab-middle.pngtab-right-side.png。您可以猜到,您应该将图像适本地分成这些部分。

现在,您可以使用 CSS:

.tab {
background: url(../images/tab-middle.png) repeat-x 0 0;
overflow: hidden;
color: white;
float: left;
margin: 0 10px; /* must be same as side widths */
}

.tab:after {
content: '.';
overflow: hidden;
text-indent: -999px;
float: right;
width: 17px; /* width of the right edge of the tab */
background: url(../images/tab-right-side.png) no-repeat 0 0;
}

.tab:before {
content: '.';
text-indent: -999px;
overflow: hidden;
float: left;
background: url(../images/tab-left-side.png) no-repeat 0 0;
width: 17px; /* width of the left edge of the tab */
}

双元素

双元素的实现方式与单元素示例的选项 1 完全相同,只是您不必使用伪类选择器。如果您编写的代码必须支持不支持伪类选择器(或至少 :before:after)的旧版浏览器,那么这就是您的 只有选项。

同样,您将两个图像拆分为 tab-left-side.pngtab-right-side.png

然后,你的 CSS:

LI.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}

LI.tab A {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}

它实际上与选项 1 示例中的 CSS 相同,只是我们更改了选择器。

关于css - 给定一个带有边框的图像按钮,如何在 CSS 中拉伸(stretch)/重复中间部分以获得可变长度的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14279696/

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