在 HTML5 中保留角的同时拉伸图像答案

【问题标题】：Stretching an Image while preserving the corners in HTML5在 HTML5 中保留角的同时拉伸图像
【发布时间】：2012-05-04 23:54:20
【问题描述】：

我想达到下面问题中描述的效果，但是使用CSS。我记得在某处看到现在可以使用 HTML5 完成此操作，但现在找不到属性名称。

Stretching an UIImage while preserving the corners

【问题讨论】：

标签： html css

【解决方案1】：

您必须使用 3 张不同的图片。

首先，进入 Photoshop 或 Gimp 之类的软件，将你拥有的箭头图像分成 3 个部分。左边是曲线，右边是箭头部分。将它们保存为 3 张不同的图像。

获得图像后。创建一个 HTML 图像元素：

<img src="img-middle.jpg" />

在您的 CSS 中，对前后伪元素应用样式并添加您不想拉伸的两个图像位。

img:before {
    contents: '';
    background: url('img-left.jpg');
    height: 50px;
    width: 20px;
    position: absolute;
    left: -20px;
}

img:after {
    content: '';
    background: url('img-right.jpg');
    height: 50px;
    width: 40px;
    position: absolute;
    right: -40px;
}

确保更改宽度、高度、左右值以匹配两个图像文件的宽度和高度。这个 CSS 允许将图像的这些位添加到左侧和右侧，无论元素被拉伸多宽。它也很酷，因为它只有一个元素，所以 CSS 保持相当干净，除了空内容的要求：'';属性。

因此，您可以动态拉伸中间图像元素。假设你想让他的箭头拉伸，有一些 jQuery 动画元素的宽度，然后中间部分将拉伸并且角落将保持不变，因为它们在技术上不是原始元素的一部分，它们只是附加的。

ETA：至于 Objective-C 相关帖子中描述的方法，没有 CSS 属性可以像这样分解图像，除非它是在我从未听说过的一些晦涩的 webkit nightly build 中。您在这里的选择是将其他两侧分开。您还可以将图像的左右部分组合成一个精灵并使用背景位置：；用于选择图像位的 CSS 属性，这样您就只有两个图像文件请求，因为您希望将这些请求保持在低位以加快页面加载时间。

【讨论】：

这是一个很好的答案，但不适合我的情况，因为我需要图像的大小是动态的，并且当你有正确的东西时：-40px;它不能动态扩展。
哦，所以你也需要左/右部分是动态的吗？所以它适用于具有相同 CSS 的任何尺寸的图像？
我有 3 张图片：左边一张我想成为（宽度自动和高度 100%）中间一张（宽度 100% 和高度 100%）右边一张（宽度自动和高度 100%）。现在的问题是中间的重叠了左右，我不知道如何防止重叠......
忘记添加图片设置为背景图片
只需添加位置：相对；左：-100%；向左一和位置：相对；对：-100%；到右边。

【解决方案2】：

您可以创建一个元素，为其分配左侧和右侧大写的伪元素，并使用应用于 width 属性的 CSS3 过渡来实现此效果。

我已经设置了一个working demo on jsFiddle 来说明它是如何完成的。此演示使用背景颜色，但也可以使用图像（沿 X 轴重复中心元素）。

查看HTML5 rocks playground，您会发现一些迷人的 sn-ps（自然而然地）展示了 CSS3 和 HTML5 的强大功能，并且也可以将其用作快速参考。

【讨论】：

你使用border-radius，尝试使用3张图片，一张用于左上角和下角，一张用于中间拉伸但不重叠角落图像，第三张图像用于右上角和下角。所有这些都需要动态高度，当然还有动态宽度。
如果使用单个图像作为侧盖，则无法实现动态高度。
但我最初的问题是关于 HTML5 中的新选项，我记得看到过这个，但现在找不到
谢谢，但这不是我问题的答案
它是 HTML5 并且可以与图像一起使用。我相信这是解决问题的一种可能方法。

【解决方案3】：

你说的是 CSS3 吗？

我认为border-image 几乎就是您想要的。它可以让您拍摄单个图像并将其转换为元素的边框。

这有点难用，所以 Mozilla 制作了一个很棒的 WYSIWYG 编辑器： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

【讨论】：