Как установить фоновое изображение выше фонового цвета - PullRequest
Новая
       43

Как установить фоновое изображение выше фонового цвета

1 голос
/ 04 мая 2019

Я хочу установить background-image выше background-color (background-image - это строка). См. Кодовый блок и фрагмент: 

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
}
<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Ответы [ 2 ]

2 голосов
/ 04 мая 2019

Обратите внимание, что вместо установки фона для двух классов вы можете установить его в .class2, используя background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (изображение, упомянутое первым, будет наложено на красный фон, упомянутый последним) - см. Демонстрацию ниже: 

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              red; /* changed*/
  border-radius: 5rem !important;
  display: inline-block;
}
<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Решение

Если вы хотите, чтобы фоновое изображение распространялось на полные значения td, можно использовать radial-gradient для красного круга и объединить его с фоновым изображением для линии. Обратите внимание, что здесь текст находится над красным фоновым цветом и строкой : 

table {
border-collapse: collapse;
}

table, td{
border: 1px solid black;
}

td.class1 {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              radial-gradient(farthest-side,red 70%, transparent 72%);
  background-position: center;
  text-align: center;
  color: #fff;
}
<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Если вы хотите эффект зачеркивания , вы можете разместить линию background-image над <span> фоном и текстом, используя негатив z-index на <span> - см. демо ниже: 

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
  background-position: center;
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
  position: relative; /* added */
  z-index: -1; /* added */
}
<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Еще одна опция для эффекта зачеркивания использует псевдоэлемент , чтобы вам не приходилось связываться с z-index - см. Демонстрацию ниже: 

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 { /* added */
  padding: 10px; /* for illustration */
  position: relative;
}

td.class1:after { /* added */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
  background-position: center; /* added */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
}
<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>
1 голос
/ 04 мая 2019

Вам не нужно иметь другой класс с именем table.class1 скорее это будет хорошо работать 

.class2 {
   text-align: center;
    color: #fff;
    height: 20px;
    width: 20px;
    border-radius: 5rem !important;
    display: inline-block;
    background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
    background-color: red;
}
...