时间戳

首页 > 解决方案 > 如何将自定义边边框设置为图像并使其显示在其他图像上？

html - 如何将自定义边边框设置为图像并使其显示在其他图像上？

问题描述

我正在尝试实现以下所需的输出。在此处输入图像描述

下面是我已经实现的边界部分。现在如何重叠图像并设置边框如下图。

下面是我的代码。

<!DOCTYPE html>
<html>
<head>
    <style> 
        .img1 {

            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
            z-index: 1
        }

        .img2{
            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top right/ /* position */
            50% 100% /* width height */
            border-box no-repeat;
            z-index: 2
        }
    </style>
</head>
<body>

    <img src="https://picsum.photos/id/10/200/150" class="img1">
    <img src="https://picsum.photos/id/10/200/150" class="img2" >


</body>
</html>

标签： htmlcssimageborder

解决方案

你必须使用颜色:before请检查下面的代码 

.outer {
 display: flex;
    align-items: flex-end;
}
img{max-width: 100%}
.img1 {
    position: relative;
    padding: 20px 0 0 20px;
    float: left;
    top: 90px;
    margin-right: -90px;
    width: 180px;
    z-index: 1;
}
.img2{
  position: relative;
  float: left;
  padding: 20px 20px 0 0;
  width: 400px;
      border-bottom: 20px solid red;
}
.img1 img, .img2 img{
  position: relative;
  display: block;
}
.img1:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 120px;
    background: red;
    display: block;
}
.img2:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: red;
    display: block;
}
<div class="outer">
<div class="img1"><img src="https://webmeup.com/upload/blog/lead-image-105.png"></div>
   <div class="img2"> <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"> 
     </div>
</div>

希望！它适合你

推荐阅读