我试图在一些图像上覆盖我已经尝试了很多方法,但我似乎无法在图像上覆盖它。叠加层要么在上方,要么在下方,但不会覆盖图像。任何帮助都会很棒!
这是我的代码:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
最佳答案
我添加了一些元素和样式,将 .box
位置设为绝对。
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
关于image - 叠加在带有名称的图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39761049/