css inset box-shadow cho hàng bảng?

Question

xem câu hỏi có liên quan nhưng khác của tôi: css box-shadow cho hàng bảng?

Đây là mã HTML của tôi:

<style>
.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
}
</style>
<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

Mục tiêu là để có bóng đổ bên trong ở hàng đầu tiên. Vấn đề là màu nền của ô 1 đang che khuất nó.

Câu hỏi của tôi là: làm cách nào để làm cho chương trình thả nội dung hiển thị trên đầu nền của ô 1?

Answer 1

Bạn cũng có thể thử mix-blend-mode

Các mix-blend-modebộ thuộc tính CSS như thế nào nội dung của một nguyên tố nên pha trộn với các nội dung của công ty mẹ của phần tử và nền của phần tử.

.yellow{
    background-color: yellow;
    mix-blend-mode:multiply
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
 /*optionnal :
    background:white ; 
  to avoid .yellow mixing eventually with body, or else background */
}

<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

Answer 2

tô màu ô trong bảng bằng cách sử dụng phần tử giả mà bạn có thể tạo sau bóng:

table {
  position:relative;
  z-index:-1;
}

.yellow {
  position:relative;
}
.yellow::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:yellow;
}

td {
  width: 40px;
}

tr:first-child {
  box-shadow: inset 1px 1px 5px 5px #d99292;
}

<table>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>

Answer 3

Tôi có một vòng làm việc ở đây.

Thêm một khoảng trống tuyệt đối trđể ở trên cùng.

.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    position: absolute;
    box-shadow: inset 1px 1px 5px 5px #d99292;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>