CSS背景background-image

为什么父级设置了背景图片,但是子级的背景图片不显示????

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./CSS/banner.css">
</head>

<body>
    <div class="carousel">
        <!-- 轮播组图 -->
        <ul class="carousel-imgs">
            <li>
                <a href=""><img src="./imgs/banner_1.jpg" alt="banner"></a>
            </li>
            <li>
                <a href=""><img src="./imgs/banner_2.jpg" alt="banner"></a>
            </li>
            <li>
                <a href=""><img src="./imgs/banner_3.jpg" alt="banner"></a>
            </li>
        </ul>
        <!-- 控制器 -->
        <div class="perv"></div>
        <div class="next"></div>
        <!-- 计数器 -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
```CSS代码
* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.carousel {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    /* 相对定位 */
    overflow: hidden;
}

.carousel-imgs {
    width: 9999px;
}

.carousel-imgs li {
    float: left;
}

.carousel-imgs img {
    width: 1000px;
    height: 500px;
}

.perv {
    width: 45px;
    height: 45px;
    background-image: url(../imgs/prev.png);
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -16px;
    /* 绝对定位 脱离文档流 */
}

.text {
    width: 45px;
    height: 45px;
    background-image: url(../imgs/prev.png);
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -16px;
    /* 绝对定位 脱离文档流 */
}

测试了下,可以得到样式,是不是你的图片文件名不对
你一会儿prev一会儿perv
图片说明

没看懂问的是什么,而且.next的这个类名是没有设置样式的,写错成了.text?

是不是定位的问题哦,父级遮住了子级,加个z-index看看,另外css中是不是写错了 .next写成了 .text