在一个网页上的多个图像上使用叠加层
Posted
技术标签:
【中文标题】在一个网页上的多个图像上使用叠加层【英文标题】：Using overlays on multiple images on one web page 【发布时间】：2019-10-23 23:15:48 【问题描述】：我对编码比较陌生，我正在使用 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" 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" class="image" >
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>
</body>【问题讨论】：
认为这是被问到的。 ***.com/questions/21086385/… @TemaniAfif 你最好不要用答案替换代码。不？ :) @ItangSanjana 我没有用答案代替。我将 codepen 中的代码复制到问题中，因为我们需要问题中的代码，而不是外部链接。 OP可以轻松编辑codepen来修复问题，问题将变得无用 @TemaniAfif 我明白了。请原谅我的误解:) 【参考方案1】：您正在将图像设置为position:fixed，这是罪魁祸首。删除它并改为容器inline-block：
*
background-color: #d7c2fc;
font-family: Courier New, monospace;
#title
text-align: Center;
font-size: 50px;
.container
position: relative;
display: inline-block;
.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%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #008CBA;
<h1 id="title"> Why be Vegan?</h1>
<div class="container">
<img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" 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" class="image">
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>【讨论】：
【参考方案2】：figure
position: relative;
max-width: 222px;
img
height: auto;
max-width: 100%;
vertical-align: middle;
figcaption
align-items: center;
background-color: whitesmoke;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.5s ease;
figure:hover figcaption
opacity: 0.75;
<figure>
<img src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg"
>
<figcaption>Animal</figcaption>
</figure>注意事项：
尽可能使用语义 HTML 元素。即<figure> & <figcaption>
将CSS相对位置添加到绝对/固定位置的父节点。
尽可能让图像响应height: auto; max-width: 100%。最好也使用媒体或图像源元素<source>。
【讨论】：
以上是关于在一个网页上的多个图像上使用叠加层的主要内容，如果未能解决你的问题，请参考以下文章