如何使用 HTML 或 CSS 或 JS 重叠两个图像并在两者之间划一条交叉线，如以下示例所示

how to overlap two images and make a cross line between the two using either HTML or CSS or JS like the below example

本文关键字：一条 两者之间 交叉线 图像 JS CSS HTML 何使用 重叠 两个      更新时间：2023-09-26

如何使用HTML或CSS或JS重叠两个图像并在两者之间划一条交叉线，就像下面的例子一样，你可以看到两个图像之间的一条线。我正在尝试使用 2 张图像创建一个类似的 HTML 文档，但无法做到这一点。这是示例图像

这是一个类似于我尝试使用 2 张图像开发页面的网页。https://www.avidiabank.com/

下面是

负责产生这种效果的代码片段。

  if ($('.section-splash-page').length) {
      $('.splash-btn-personal')
       .hover(function () {
         $('.section-splash-page').addClass('hover-left'); })
       .mouseleave(function () {
          $('.section-splash-page').removeClass('hover-left');
       });
 $('.splash-btn-business')
     .hover(function () {
      $('.section-splash-page').addClass('hover-right');
     })
     .mouseleave(function () {
                $('.section-splash-page').removeClass('hover-right');
            });
        }

下面是CSS的一部分

.section-splash-page.hover-right {
    background-image: url(/sites/all/themes/avidia/assets/img/splash_page-right.jpg);
}
.section-splash-page.hover-left {
    background-image: url(/sites/all/themes/avidia/assets/img/splash_page- left.jpg); 
}
.section-splash-page {
    background-image: url(/sites/all/themes/avidia/assets/img/splash_page.jpg),url(/sites/all/themes/avidia/assets/img/splash_page-left.jpg),url(/sites/all/themes/avidia/assets/img/splash_page-right.jpg);
    background-size: cover,0,0;
    background-position: center center,center center,center center;
    background-repeat: no-repeat,no-repeat,no-repeat;
    overflow: hidden;
}

希望这可以帮助您了解效果。

相关文章：