Stacktr

Festlegen der z-index-hintergrund-Bild über background-color css

Ich möchte hintergrund Bild oben die Hintergrundfarbe in der css das Hintergrundbild ist eine Linie 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

Danke

1 Antworten

kukkuz

4. Mai 2019

Statt der Einstellung hintergrund auf zwei Klassen, können Sie es in .class2 iteslf durch die Verwendung von background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (das Bild zuerst erwähnt werden, gestapelt werden, über den roten hintergrund zuletzt erwähnt) - siehe demo unter:

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>

Wenn Sie wollen, um das Hintergrundbild zu erstrecken sich über die volle td und legen Sie es über die <span> hintergrund und text, die Sie verwenden können, negativ z-index am <span> - siehe demo unter:

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>

Eine weitere option, mit einem pseudo-element , so dass Sie nicht haben, um Chaos mit z-index - siehe demo unter:

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>