Как изменить цвета для альтернативных кнопок с помощью CSS? - PullRequest
Новая
       8

Как изменить цвета для альтернативных кнопок с помощью CSS?

1 голос
/ 22 февраля 2012

У меня есть следующий код.У меня есть два фоновых изображения для кнопок - «lightSquare.jpg» и «darkSquare.jpg».В настоящее время все кнопки имеют фоновое изображение с именем «darkSquare.jpg».То, что я хочу сделать, это иметь альтернативные кнопки с светлыми и темными изображениями, как на шахматной доске.Как это могло быть сделано?

  <html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>The Main Page</title>
  </head>
  <body>
    <table>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>

       </table>
    </body>
   </html>

CSS выглядит следующим образом - 

  button 
  {
   background-image:url('darkSquare.jpg');  
   width:50px; 
   height:50px; 
   border: 0
  }

  table
  {
   border-collapse: collapse;
  }

td {padding: 0;}

Ответы [ 3 ]

4 голосов
/ 22 февраля 2012

Не совсем тот же вариант использования, но это будет выполнено точно так же, как это:

Цвет строки альтернативной таблицы с использованием CSS?

Учитывая ваш текущийHTML, вы можете сделать это с помощью nth-child следующим образом: 

td:nth-child(odd) button {
    background-image:url('darkSquare.jpg')
}
td:nth-child(even) button {
    background-image:url('lightSquare.jpg')
}

Если вы хотите выглядеть в шахматном порядке, вы можете использовать более сложные CSS-цепочки. 

tr:nth-child(even) td:nth-child(odd) button {
    background-image:url('darkSquare.jpg')
}
tr:nth-child(even) td:nth-child(even) button {
    background-image:url('lightSquare.jpg')
}
tr:nth-child(odd) td:nth-child(odd) button {
    background-image:url('lightSquare.jpg')
}
tr:nth-child(odd) td:nth-child(even) button {
    background-image:url('darkSquare.jpg')
}

Имейте в виду, что это становитсядействительно хрупкий, тем сложнее он становится, но пока ваш HTML не меняется, это нормально.

Кроме того, насколько я знаю, IE не поддерживает nth-child (возможно, самые новые версииделаю, я не уверен).

1 голос
/ 23 февраля 2012

Я сделал это так - 

   <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
              <td><button class="darkSquare"></button></td>
            </tr>
            <tr>
              <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
            </tr>

CSS - 

        .lightSquare
         {
            background-image:url('lightSquare.jpg');
         }

        .darkSquare
         {
            background-image:url('darkSquare.jpg'); 
         }

Да, я новичок в CSS.

1 голос
/ 22 февраля 2012

Попробуйте добавить эту CSS 

button:nth-child(even) {
    background-image:url('darkSquare.jpg')
}
button:nth-child(odd) {
    background-image:url('lightSquare.jpg')
}

См. jsFiddle

...