如何在不影响底层的情况下在不同的 z-index 图层中显示验证码图像？
How to display a captcha image in a different z-index layer without affecting the underlaying layer?
我有一个 CSS 布局，带有工具提示。我在页面上有链接，当访问者将鼠标悬停在链接上时，图像会出现在工具提示中。有时工具提示中只有一张图片，有时两张图片，甚至三张。
我的代码如下所示：https://jsfiddle.net/vehpw5zn/（我建议在 jsfiddle 上查看，因为内置代码片段仅在使用鼠标滚动时显示工具提示。）
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
</div>
Link text
</a>
基本上可以了，但是两张图片之间有一个小差距。
我的另一个问题是，当我尝试在内容顶部的工具提示中显示小验证码图像时，在不同的 z-index 层中，小验证码图像的高度出现在上一层div，div的绿色部分变大。我在两个棕色图像下方得到了更大的边距，它是透明的绿色。我怎样才能避免这种情况？
我的第二阶段代码：https://jsfiddle.net/vehpw5zn/1/
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display:none;
border:1px solid black;
position: relative;
top:-46px;
left:4px;
z-index:3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>
对于你的第二期，需要修改验证码图片的位置。位置属性由relative变为absolute，然后对齐bottom属性而不是top属性。 left 属性 从 4px 更改为 15px。 bottom 属性 和 top 属性 的值可以根据需要更改。
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>
我有一个 CSS 布局，带有工具提示。我在页面上有链接，当访问者将鼠标悬停在链接上时，图像会出现在工具提示中。有时工具提示中只有一张图片，有时两张图片，甚至三张。
我的代码如下所示：https://jsfiddle.net/vehpw5zn/（我建议在 jsfiddle 上查看，因为内置代码片段仅在使用鼠标滚动时显示工具提示。）
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
</div>
Link text
</a>
基本上可以了，但是两张图片之间有一个小差距。
我的另一个问题是，当我尝试在内容顶部的工具提示中显示小验证码图像时，在不同的 z-index 层中，小验证码图像的高度出现在上一层div，div的绿色部分变大。我在两个棕色图像下方得到了更大的边距，它是透明的绿色。我怎样才能避免这种情况？ 我的第二阶段代码：https://jsfiddle.net/vehpw5zn/1/
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display:none;
border:1px solid black;
position: relative;
top:-46px;
left:4px;
z-index:3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>
对于你的第二期，需要修改验证码图片的位置。位置属性由relative变为absolute，然后对齐bottom属性而不是top属性。 left 属性 从 4px 更改为 15px。 bottom 属性 和 top 属性 的值可以根据需要更改。
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>