Stacktr

Cómo establecer z índice de imagen de fondo por encima del fondo del color de la css

Quiero establecer en el fondo de la imagen de arriba, el color de fondo en css la imagen de fondo es una línea CSS

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;
}

HTML

<table>
 <tr>
  <td>S</td>
  <td>B</td>
</tr>
<tr>
  <td>S</td>
  <td class="class1">
      <span class="class2">S</span>
</td>

https://codepen.io/anon/pen/OGKoMz

Gracias

1 Respuestas

kukkuz

4 de mayo de 2019

En lugar de establecer el fondo en dos clases se puede establecer en .class2 iteslf mediante el uso de background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (la imagen mencionada en primer lugar será apilado sobre el fondo rojo se menciona en último lugar) - ver demo:

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>

Si usted quiere tener la imagen de fondo para extender a través de la plena td y se coloca sobre el <span> de fondo y de texto, puede utilizar negativo z-index en el <span> - ver demo:

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>

Otra opción de usar un pseudo elemento de modo que usted no tiene que meterse con z-index - ver demo:

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>