Question

为什么圆圈类中的背景颜色不起作用？试过这个约5分钟出了什么问题？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simon Game</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
    <link rel="stylesheet" href="Simon Game.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col s6">
                <div id="circle1" class="circles"></div>
                <div id="circle2" class="circles"></div>
            </div>
            <div class="col s6">
                <div id="circle3" class="circles"></div>
                <div id="circle4" class="circles"></div>    
            </div>  
        </div>
    </div>
    <script src="Simon Game.js"></script>
</body>
</html>

CSS：

.circles {
    color: black;
    background: black;
}

Answer 1

如果容器没有任何内容，那么你应该提供一些固定的高度和宽度以便查看样式，试试这个

.circles {
    color: black;
    background: black;
    width: 50px;
    height:50px;
}

Answer 2

该属性称为background-color。此外，如果元素中没有文字，则需要设置width和height，以便显示。

修正了CSS：

.circles {
    color: black;
    background-color: black;
    width: 50px;
    height: 50px;
}

Answer 3

问题在于宽度和高度，它们没有任何内容。

＆＃13;

.circles {
    color: black;
    background: black;
     width: 100px;
    height: 100px;
}

＆＃13;

<div class="container">
        <div class="row">
            <div class="col s6">
                <div id="circle1" class="circles"></div>
                <div id="circle2" class="circles"></div>
            </div>
            <div class="col s6">
                <div id="circle3" class="circles"></div>
                <div id="circle4" class="circles"></div>    
            </div>  
        </div>
    </div>

＆＃13;

Answer 4

现在这对你有所帮助。

<body>
    <div class="container">
        <div class="row">
            <div class="col s6">
                <div id="circle1" class="circles"></div>
                <div id="circle2" class="circles"></div>
            </div>
            <div class="col s6">
                <div id="circle3" class="circles"></div>
                <div id="circle4" class="circles"></div>    
            </div>  
        </div>
    </div>
    <script src="Simon Game.js"></script>
</body>

#circle1 {
    color: black;
    background-color: red;
    height:50px;
    width:150px;
}

#circle2 {
    color: black;
    background-color: green;
    height:50px;
    width:150px;
}

#circle3 {
    color: black;
    background-color: black;
    height:50px;
    width:150px;
}

#circle4 {
    color: black;
    background-color: blue;
    height:50px;
    width:150px;
}

Div Background没有显示出什么是解决方案？

4 个答案: