在一个网页上的多个图像上使用叠加
我对编码比较陌生，我正在使用 codepen.io 来变得更好，所以忽略实际的内容，它可以用来练习。无论如何，我正在尝试在一页上的图像上进行多次叠加。我似乎无法弄清楚如何将叠加层放在他们的个人图像上。
这是 codepen 链接：https ://codepen.io/ToxicCookie/pen/RmXYLv ? editors = 1000
<html>
<head>
<style>
* {
background-color: #d7c2fc;
font-family: Courier New, monospace;
}
#title {
text-align: Center;
font-size: 50px;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 300px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
background-color: #008CBA;
}
#animals {
position: fixed;
}
#earth{
position: fixed;
left: 320px;
}
#body{
position: fixed;
left: 630px;
}
</style>
</head>
<body>
<h1 id= "title"> Why be Vegan?</h1>
<div class="container">
<img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
<div class="overlay">
<div class="text">Animals</div>
</div>
</div>
<div class="container">
<img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image" >
<div class="overlay">
<div class="text">Earth</div>
</div>
慕尼黑的夜晚无繁华2回答
随时随地看视频慕课网APP
相关分类
JavaScript