如何将自定义边边框设置为图像并使其显示在其他图像上？
Posted
技术标签:
【中文标题】如何将自定义边边框设置为图像并使其显示在其他图像上？【英文标题】：How to set custom sided border to image & make it appear on on other? 【发布时间】：2021-02-10 12:33:53 【问题描述】：我正在尝试实现以下所需的输出。
下面是我实现的边框部分。现在如何重叠图像并设置边框如下图。
下面是我的代码。
<!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>
【问题讨论】：
【参考方案1】：使用伪元素我们可以做到这一点。
.image-container
display: inline-block;
margin-left: 100px; /* for testing purpose */
position: relative; /* It must add to parent element */
.img1
border: 15px solid transparent;
background: linear-gradient(#faa633, #faa633)
top left/ /* position */
50% 50% /* width height */
border-box no-repeat;
z-index: 1;
position: absolute;
bottom: -100px; /* to push to bottom (height/2) */
left: -100px; /* to push to left (width/2) */
.img2-box
position: relative;
display: inline-block;
.img2-box::before
position: absolute;
content: '';
width: 15px;
height: 100%;
left: 0;
top: 0;
background: #fff;
.img2-box::after
position: absolute;
content: '';
height: 15px;
width: 60%;
left: 0;
top: 0;
background: #fff;
.img2-box img
border: 15px solid #faa633
<div class="image-container">
<img src="https://picsum.photos/id/10/200/200" class="img1">
<div class="img2-box">
<img src="https://picsum.photos/id/10/400/300" class="img2">
</div>
</div>【讨论】：
Thnx 兄弟，但我需要第一张图像左侧的边框和边框下方的第二个边框 我没听懂你。你能解释更多你想要什么吗？以便我可以帮助您。 我想要和上面附上的图片一样 如果问题得到解决，请接受并投票赞成我的回答。【参考方案2】：您必须在:before 中使用颜色请检查以下代码
.outer
display: flex;
align-items: flex-end;
imgmax-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>希望！它适合你
【讨论】：
非常感谢兄弟:) 真的很感谢兄弟:) 做得很好 乐于助人。如果遇到任何问题，请在此处发表评论...以上是关于如何将自定义边边框设置为图像并使其显示在其他图像上？的主要内容，如果未能解决你的问题，请参考以下文章
CANON SDK 将自定义白平衡设置为保存的 JPG 图像