パーツ（表のセル背景に色付けや透かし画像）

<table>
<thead>
<tr>
<th class="table-thblank"></th>
<th>WWW</th>
<th>XXX</th>
<th>YYY</th>
<th>ZZZ</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAA</th>
<td class="cell-yellow">あいうえおあいうえおあいうえお</td>
<td class="cell-pink">あいうえおあいうえおあいうえお</td>
<td class="cell-blue">あいうえおあいうえおあいうえお</td>
<td class="cell-green">あいうえおあいうえおあいうえお</td>
</tr>
<tr>
<th>BBB</th>
<td class="watermark-cell-hatena01">あいうえおあいうえおあいうえお</td>
<td>あいうえおあいうえおあいうえお</td>
<td class="watermark-cell-cheekmark01">あいうえおあいうえおあいうえお</td>
<td class="watermark-cell-yokobou01">あいうえおあいうえおあいうえお</td>
</tr>
<tr>
<th>CCC</th>
<td class="watermark-cell-maru03">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td>
<td class="watermark-cell-sankaku01">あいうえおあいうえおあいうえお</td>
<td class="watermark-cell-marumaru01">あいうえおあいうえおあいうえお</td>
<td class="watermark-cell-batu01">あいうえおあいうえおあいうえお</td>
</tr>
<tr>
<th>DDD</th>
<td class="watermark-cell-maru01">あいうえおあいうえおあいうえお</td>
<td class="watermark-cell-maru02">あいうえおあいうえおあいうえお</td>
<td class="watermark-cell-marumaru02">あいうえおあいうえおあいうえお</td>
<td>あいうえおあいうえおあいうえお</td>
</tr>
</tbody>
</table>

/*セルに背景画像を入れる*/

.watermark-cell-maru01 {
background-image: url(img/maru01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-maru02 {
background-image: url(img/maru02);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-maru03 {
background-image: url(img/maru03);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-marumaru01 {
background-image: url(img/marumaru01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-marumaru02 {
background-image: url(img/marumaru02);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-sankaku01 {
background-image: url(img/sankaku01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-batu01 {
background-image: url(img/batu01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-hatena01 {
background-image: url(img/hatena01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-cheekmark01 {
background-image: url(img/cheekmark01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

.watermark-cell-yokobou01 {
background-image: url(img/yokobou01);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.5);
}

/*セルの色を変える*/

.cell-yellow {
background-color: #ffff00;
}
.cell-pink {
background-color: #ffc0cb;
}
.cell-blue {
background-color: #87cefa;
}
.cell-green {
background-color: #66cdaa;
}
.cell-orange {
background-color: #ffa500;
}
.cell-violet {
background-color: #ee82ee;
}
.cell-usuiviolet {
background-color: #bec9ed;
}