在制作悬停效果css时保留图像上的文本_Css_Hover_Overlay

在制作悬停效果css时保留图像上的文本

css

在制作悬停效果css时保留图像上的文本,css,hover,overlay,Css,Hover,Overlay,我需要在图片上放一些文字，它必须永远保持在那个颜色。我这样做了，但是当我停留在图片上时，文本消失了。我该怎么办？没有找到答案。我希望文本一直在那里，有无悬停。这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .photo-text.one { b

我需要在图片上放一些文字，它必须永远保持在那个颜色。我这样做了，但是当我停留在图片上时，文本消失了。我该怎么办？没有找到答案。我希望文本一直在那里，有无悬停。这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

    .photo-text.one {
        background-size: cover;
        background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
        height: 409px;
        position: relative;
        width: 576px;
    }

    .img-overlay{
        width: 100%;
        height: 100%;
        background: #6fc3df;
        opacity: 0.75;
    }

    .photo-text.one:hover:after {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
    }

    .text {
        position: absolute;
        top: 100px;
        left: 150px;
        color: red;
    }
</style>
</head>
<body>
<div class="photo-text one">
    <div class="img-overlay">
    </div>
    <h2 class="text">fffff</h2>
</div>
</body>
</html>


.photo-text.one{
背景尺寸：封面；
背景：url（“https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg）无重复中心顶部；
高度：409px；
位置：相对位置；
宽度：576px；
}
.img覆盖{
宽度：100%；
身高：100%；
背景：#6fc3df；
不透明度：0.75；
}
.图片文本。一：悬停：之后{
内容：''；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景：url（“https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg）无重复中心顶部；
}
.文本{
位置：绝对位置；
顶部：100px；
左：150px；
颜色：红色；
}
fffff

将

z-index

属性添加到文本中

.photo-text.one{
背景尺寸：封面；
背景：url（“https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg）无重复中心顶部；
高度：409px；
位置：相对位置；
宽度：576px；
}
.img覆盖{
宽度：100%；
身高：100%；
背景：#6fc3df；
不透明度：0.75；
}
.图片文本。一：悬停：之后{
内容：''；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景：url（“https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg）无重复中心顶部；
}
.文本{
位置：绝对位置；
顶部：100px；
左：150px；
颜色：红色；
z指数：1；
}


fffff