我需要创建这个布局，我想尽可能多地使用 CSS，而不是使用图像等。
因此，我怎样才能在 CSS 中做到这一点？（如果有的话？）
如您所见，后面有图像，按钮覆盖有填充。我正在苦苦挣扎的一点是在按钮上方和左侧的图像上以及按钮右侧的底部创建曲线（我已经在下图中指出了它们）。
任何帮助都会很棒。
谢谢
问问题
192 次
4 回答
3
我知道足够多的 CSS 是危险的，所以我不能详细说明每一步，但我认为你可以这样处理它：
将背景图像拆分为两个单独的图像，两个图像都在灰色框顶部的高度处的 z-index 为 0。我认为您可以使用两个div引用具有不同偏移量的相同原始图像的两个 （类似于 CSS Sprites），但我不知道如何做到这一点的细节。下部的左边缘div将从灰色框结束的地方开始。围绕每个“图像”的左下角div。
在 z-index 为 1 处添加灰色框，并进行适当的舍入，然后在 z-index 为 2 处添加蓝色框，再次进行适当的舍入。
包含所有这些的块元素的背景也必须是灰色的以匹配灰色边框并正确填充最右边箭头指向的灰色。
于 2012-04-03T20:04:27.627 回答
1
您根本不必拆分图像，只需拆分容器 div。
让我详细说明一下：您可以将图像设置为背景图像，而不是将其放在 img 标签的 src 属性中。这种技术在处理 CSS 精灵时最常用。
所以，如果你有一个恒定宽度和高度的最上面的 div，如果你尝试在其中应用背景图像，你会发现它非常适合。
在底部，你有两个 div 或任何你喜欢的块元素，只要确保设置固定的宽度和高度，这样背景就会被应用，你将能够真正看到它。
然后你所要做的就是摆弄 css background-position 来调整 SE 图像块。
我将把一个小演示放在一起，以更好地说明这个想法。在顶部有一个大 div，底部有两个较小的 div 之后，其中两个共享相同的背景图像，但背景位置不同，您可以安全地添加一些 css3 边框半径以满足您的圆度需求。您还可以使用http://css3generator.com/ 之类的工具轻松地在所有浏览器上添加兼容层。
于 2012-04-03T20:15:32.243 回答
0
使用纯 css 很容易实现。您显示的页面分为 3 个 div，没有任何边距。您只需要为每个 div 设置正确的边框半径。
于 2012-04-03T20:03:36.177 回答
-1
这是背景图像的功能，如果这就是你的意思，它是一个 css 元素，但它不是选择器的单独属性，至少在标准 CSS 中不是。等到 CSS3 变得更加流行，然后是角半径或类似的东西。
好吧，它可能是 3 个可能是 3 个单独的 div，一个“烧”到背景图像中的孔，或者一个 div 被覆盖在按钮上。
弄清楚它是如何完成的最好方法是阅读您找到它的页面的来源。
为方便起见：如果您有基于 webkit 的浏览器，如 chrome 或 safari，则启用开发模式鼠标在“右键单击”按钮上并选择检查元素。否则，您可以倒在页面源代码上，直到找到所需的内容。
于 2012-04-03T19:57:55.117 回答