logo标签列表

如何制作具有部分透明边框的任意大小HTML元素？

htmlcss
7
考虑以下图片： grass with deckle edge 这张200x200像素的png图片代表一片有粗糙（不齐）边缘的草坪。由于图片边缘是透明的，所以看起来很自然。
问题是，我正在设计一个网页，在这个页面中，我想让各种不同大小的元素都具有这样的背景。但我不能简单地使用CSS背景属性，因为像这样重复一张图片是行不通的：例如，在每张图像的拼接处左侧的透明度显然会显示为一个接缝。但如果我只是简单拉伸图像以适配，则效果也不太好。
是否有任何（跨浏览器）方法可以解决这个问题？jQuery解决方案也可以接受。谢谢！
4个回答
9
当然，如果您将图像切片并创建大量额外的“div”，则可以使其在每个浏览器中运行且无需JavaScript。但这是（相对而言）很多工作。 - thirtydot
我不知道这个插件的存在。我可以想到几个在 DIV 上使用粗糙边缘的应用程序。非常酷。 - Imperative
5
不幸的是，需要你知道谁的支持。 - Joshua Frank
1

听起来好像你需要顶部、底部、左侧、右侧的图片(还有四个角的图片)，再加上一个可以重复的中心图片。然后使用一些 CSS 技巧将它们正确地组合在一起。就像以前人们创建圆角一样！真正的技巧在于获得一个可重复的中心图片。通过仅按照与最终中心图片的大小相匹配的步骤调整中心 div 的大小，这可能会更简单。

说实话，我甚至不知道是否可能找到一个中心图像，使其在重复时看起来不像拼布。

编辑 我有了一个更好的想法！

如果您创建的图像实际上是“通行证”，用于让您的草地图像通过。您可以使用 CSS 精灵技术调整图像的尺寸，然后覆盖侧面/角落的图像以获得凹凸不平的边缘效果。CSS 精灵将从一个足以应对您预期最大“平铺”的大图像中拉出。

我考虑过这个问题，但它真的很复杂，即使是将所有设计元素限制为步长的倍数也非常烦人。不过，对于一个可行的建议加一分。 - Joshua Frank
@Joshua - 看看我的修改，我认为那会非常有效。但正如你所说，这是很多工作。 - Antony Scott
0

你可以将内容区域包裹在4个其他的div中，并为每个div提供不同边缘的PNG图像。问题是，您的内容区域div将具有实心背景，并且这将显示在边缘的透明区域中。

话虽如此，您可以采取不同的方法。

顶部div 左浮动边缘div、内容div、左浮动边缘div（右边缘） 底部div

这将跨浏览器兼容，但设置起来很麻烦。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接