gpt4 book ai didi

javascript - 在 HTML 中的图像顶部添加倾斜叠加层

转载 作者:行者123 更新时间:2023-11-28 00:14:18 25 4
gpt4 key购买 nike

我正在尝试为一位 friend 创建一个作品集 - 其中一个要求是他有一个闪屏图像,其中有一个横跨图像的对 Angular 线框 - 这是 id 然后放置一些文本的地方。我创建了一个我想说的话的模型,但是我不知道如何编码,我使用的是 HTML CSS 和 JS,所以我可以做任何事情..

<!--HTML-->
<div class="name">
<div class="transbox1">
<img src="Assets/Background.png" class="bg1 color_overlay">
<h1>John</h1>
<h2>Doe</h2>
</div>


/*CSS*/
.bg1 {
position: absolute;
z-index: -2;
width: 100%;
overflow: hidden;
margin-left: -5% !important;
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 70%, 0 70%);
clip-path: polygon(0 10%, 100% 10%, 100% 70%, 0 70%);
opacity: 1 !important;
}

.transbox1 {
background-color: black;
color: white;
opacity: 1;

}

The Mock-up

最佳答案

我将 position:relative 添加到容器并清理了您的标记,它工作正常:

/*CSS*/

.name {
position: relative;
}

.bg1 {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0 100%, 100% 0%, 100% 100%);
background-color: red;
opacity: .5;
}

.transbox1 {
background-color: black;
color: white;
opacity: 1;
}
<!--HTML-->
<div class="name">
<div class="transbox1">
<img src="Assets/Background.png" class="bg1 color_overlay">
<h1>John</h1>
<h2>Doe</h2>
</div>
</div>

关于javascript - 在 HTML 中的图像顶部添加倾斜叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55207064/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com