如何在背景图像下放置边框？

Posted 2023-05-07

【中文标题】如何在背景图像下放置边框？

【英文标题】：How can i put a border under background image?

【发布时间】：2021-07-03 18:57:12

【问题描述】：

我有一个背景图片和一个边框，所以我需要将该边框放在我的背景图片下方，就像它在草稿中显示的那样。 Draft image 现在我有这样的东西。 My result 我该如何解决？ CSS

.hero-image 位置：相对; 宽度：100%； 左边距：44px; 最大宽度：716px； 高度：626 像素； 背景图片: url("/img/hero/hero-bg.jpg"); 背景重复：不重复； 背景位置：-150px; 背景剪辑：边框框； 背景尺寸：封面； 边框右下角半径：140px; 边框左上角半径：140px; .hero-image::after 内容：“”； 位置：绝对; 宽度：716px; 高度：626 像素； 边框：2px 实心 #b0855b; 框大小：边框框； 边框右下角半径：140px; 边框左上角半径：140px; 变换：翻译（35px，33px）；

【参考方案1】：

在 :after 选择器中添加 z-index。

.hero-image::after 
   ...
   z-index: -1;

代码 sn-p here.

【讨论】：

有效！我从没想过 z-index 可能是负数。有很多东西要学！非常感谢！

【参考方案2】：

尝试使用“z-index”属性。 指示定位元素及其后代的顺序。 示例：

.hero-image z-index: 1;

.hero-image-2 z-index: 0;

【讨论】：

Z-index 是我尝试的第一件事，不幸的是它仍然不起作用。是否会因为我使用 :after 选择器而出现该问题？