Question

我确定这很简单，我错过了一些明显的东西，但我正在尝试创建它，以便背景在高亮和默认颜色之间切换。如果我这样做，我可以得到改变的背景：

.css("background-color", "yellow")

但是由于某种原因试图切换课程是行不通的。它更改了.black上的类，但全部，没有背景颜色更改。

//This is my JQuery statement
Home.HighlightBackground = function ()
{
    $(".black").click(function()
    {
        $(this).toggleClass("highlighted")
    })

}


//This is the JQuery that creates the board

var cells = $(".cell");
var colorCount = 0;

for (var i = 0; i < cells.length; i++)
{
    var cell = $(cells[i]);
    var isDark = colorCount % 2 == 0;
    var isNextRow = (i + 1) % 8 == 0;
    colorCount += isNextRow ? 2 : 1;
    cell.css("background-color", isDark ? "navy" : "white");
}


//This is the related CSS

.home > .board
{
    display: table;
    border: 1px solid black;
}

.home > .board > .row
{
    display: table;
}

.home > .board > .row > .cell
{
    width: 80px;
    height: 80px;
    border: 1px solid black;
    display: inline-block;
}

.piece
{
    background-size: 75px 75px;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}

.red
{
    background-image: URL('../images/red.png');
}


.black
{
    background-image: URL('../images/black.png');
}

.highlighted
{
    background-color: yellow;  
}


//html source



<html>

<head>
    <title>@Model.PageTitle</title>
    <link href="~/Styles/Home.css" rel="stylesheet" />
</head>

<body>

        <script         src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-    ui.min.js"></script>
        <script src="~/Scripts/Home.js"></script>

        <div class="home">

            <div class="board">
                <div class="row">
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                </div>
                <div class="row">
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                    <div class="cell piece red"></div>
                </div>
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                </div>
                <div class="row">
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                    <div class="cell piece black"></div>
                </div>
            </div>

        </div>

</body>

Answer 1

使用background属性而不是您的个人背景属性。 background会否决任何先前声明的background-color和background-image以及其他background-*声明中的元素。

CSS

.black {
  background: URL('../images/black.png');
}

.highlighted {
  background: yellow;
}

JSFIDDLE

Answer 2

您混合background-image和background-color。如果这是一个选项，请将两者都设置为background以将背景设置为黄色。否则，图像将始终呈现在颜色上方。

另一种方法可能是覆盖突出显示的类中的background-image属性：

.highlighted
{
    background-color: yellow;
    background-image: none;
}

Answer 3

这是因为您将background-color与background-image混合在一起。图像属性具有优先级，因此图像将覆盖颜色。如果这是问题，你可以做一些事情来改变这个：

1 - 将css hightlight更改为：

    .highlighted
        {
            background-image:none;
            background-color: yellow;  
        }

2 - 或者创建新的css类以混合.highlighted和.black，例如：

    .black.highlighted
        {
            background-image:none;
        }

班级改变了，但背景不会，为什么不改变？

3 个答案: