我对编码比较陌生，我正在使用 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>
添加回答
举报
0/150
提交
取消