如何在角落里制作图像背景？

Question

我想知道如何让背景只出现在角落（以及内容周围的其他 3 个角落），如下图所示......即：

• 我显然不能拥有大图像和其中的内容，所以我认为它必须是 4 个单独的图像
• 我假设它必须是图像，因为你无法在 css 中绘制那种形状
• 我认为没有办法让图像的背景是透明的，对吗？

任何和所有帮助将不胜感激！

Answer 1

使用三个 CSS 属性：

1. background-image

   具有多个边框图像，如

   background-image: url(IMAGE1), url(IMAGE2), url(IMAGE3), url(IMAGE4)

2. 通过

   background-position

   定位图像，如

   background-position: top left, top right, bottom left, bottom right

3. 通过

   background-size

   指定图像的大小，如

   background-size: 200px 80px

Answer 2

接下来尝试：

div.image {
   background-color: #fff; /* Set default background color, same that background's base color */
   background-image: url("corner.png"); /* Set transparent image for corner */
   background-position: right top; /* Set positioning */
   background-repeat: no-repeat; /* Disable multiple background images  showing */
}