大佬教程收集整理的这篇文章主要介绍了悬停时的背景图像，不覆盖内部 HTML 元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个 <section> 元素的背景图像显示为部分不透明（在代码段上它由于某种原因传播到所有内容上，在浏览器上它将图像限制在该部分..）。
问题是图像还覆盖了该部分中的内部 HTML 标记。
我尝试在 CSS 上使用 z-index: -1;，但是当将鼠标悬停在内部 HTML 标签上时图像没有显示。
如何实现？
.card {
BACkground-image: linear-gradIEnt(to bottom right,white,lightgray);
border-radius: 10px;
-webkit-Box-shadow: 4px 4px 40px 0px rgba(0,1);
-moz-Box-shadow: 4px 4px 40px 0px rgba(0,1);
Box-shadow: 4px 4px 40px 0px rgba(0,1);
justify-content: center;
margin: 20px;
padding: 20px;
max-wIDth: 80rem;
}
.card:hover {
animation: glow 1.2s infinite alternate;
}
@keyframes glow {
from {
-webkit-Box-shadow: 4px 4px 40px 0px rgba(0,1);
-moz-Box-shadow: 4px 4px 40px 0px rgba(0,1);
Box-shadow: 4px 4px 40px 0px rgba(0,1);
}
to {
-webkit-Box-shadow: 3px 3px 30px 0px #3d6ded;
-moz-Box-shadow: 3px 3px 30px 0px #3d6ded;
Box-shadow: 3px 3px 30px 0px #3d6ded;
}
}
.bg-image {
BACkground-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/fIEld-6109500_960_720.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 10px;
opacity: 0;
Transition: ease-in-out 0.6s;
}
.bg-image:hover {
opacity: 0.6;
}<!DOCTYPE HTML>
<HTML lang="en">
<body>
<section class="card">
<div class="bg-image"></div>
<h2>
H2 heading
</h2>
<p>
This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
</p>
</section>
</body>
</HTML>
您的问题不是很清楚，但据我了解，您希望在框悬停时在框的背景中显示图像。
首先，您应该从图像中删除 hover 并将其设置为它的父级，如下所示：
.card:hover .bg-image {
opacity: 0.6;
}
因为您在图像本身上有 hover，所以图像上的 z-index 将图像放置在其他内部元素后面，这导致 hover 事件没有被触发，因为您实际上并没有悬停在图像上。
将 z-index 连同我在上面提供的代码一起放回图像上。它应该有望解决您的问题。
您还需要在 position: relative 上添加 section，否则图像会脱离 section 并弄乱布局。
您的问题不清楚，您打算这样做吗？
我刚刚为卡片添加了一个相对位置，将标签放入一个 div 并添加了类
.card-div {
position: relative;
z-index: 2;
}
.card-div:hover + .bg-image {
opacity: 0.6;
}
给它。
.card {
BACkground-image: linear-gradient(to bottom right,white,lightgray);
border-radius: 10px;
-webkit-box-shadow: 4px 4px 40px 0px rgba(0,1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0,1);
box-shadow: 4px 4px 40px 0px rgba(0,1);
justify-content: center;
margin: 20px;
padding: 20px;
max-width: 80rem;
position: relative;
}
.card:hover {
animation: glow 1.2s infinite alternate;
}
@keyframes glow {
from {
-webkit-box-shadow: 4px 4px 40px 0px rgba(0,1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0,1);
box-shadow: 4px 4px 40px 0px rgba(0,1);
}
to {
-webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
-moz-box-shadow: 3px 3px 30px 0px #3d6ded;
box-shadow: 3px 3px 30px 0px #3d6ded;
}
}
.bg-image {
BACkground-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 10px;
opacity: 0;
transition: ease-in-out 0.6s;
z-index: 1;
}
.bg-image:hover {
opacity: 0.6;
}
.card-div {
position: relative;
z-index: 2;
}
.card-div:hover + .bg-image {
opacity: 0.6;
}<!DOCTYPE html>
<html lang="en">
<body>
<section class="card">
<div class="card-div">
<h2>
H2 heading
</h2>
<p>
This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
</p>
</div>
<div class="bg-image"></div>
</section>
</body>
</html>以上是大佬教程为你收集整理的悬停时的背景图像，不覆盖内部 HTML 元素全部内容，希望文章能够帮你解决悬停时的背景图像，不覆盖内部 HTML 元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。