layout - 将 div 裁剪为 2 个背景图像，然后在顶部分层渐变，使用 CSS3

Question

我希望能够创建一行 DIV，如下所示：

\---------\---------\---------\
 \         \         \         \
 /         /         /         /
/---------/---------/---------/

唯一的问题是，这些 DIV 中的每一个都有一个百分比的宽度，而不是绝对值。我希望能够使用两个图像创建一个像上面这样的 DIV ...

\---+
 \  |
 /  |
/---+

和...

+--\
|   \
|   /
+--/

...其中第一个图像与 DIV 的左侧对齐，第二个图像与右侧对齐。然后，在此之上，我想添加一个从西北方向到东南方向的渐变。

我想尝试避免创建一个内部有 3 个单独的 DIV 的 DIV，一个用于图像的每个部分，因为我认为 CSS3 正在发展以阻止这个确切的原因，就像过去给一个 div 提供 9 个 DIV 的网格一样在它里面只是为了添加一个漂亮的外阴影。

无论如何，有人知道我该怎么做吗？我意识到有背景分层之类的东西，所以我想这是一个开始。

提前致谢：）

score 0 · Accepted Answer

你在寻找这样的东西..，

我在一个 Div [左右和中间] 中提到了 3 个背景。

score 0 · Accepted Answer

使用 3 张图像而不是 2 张图像可能更简单：一张用于容器的左侧，一张用于容器的右侧，一张（新的）用于两个中间边框。会有左、右和中间边框图像。

每列将有一个带有的 bg 图像（分别为左、中、中），background-position:left top;外部容器将有一个带有的 bg 图像（右）background-position:right top;。

2 回答 2