[英]remove or make transparent background and header colour of table
我正在嘗試刪除表格的白色背景。 我試過使用background-color: transparent
但這沒有效果(改變顏色也沒有效果)。 我不確定這是為什么。
HTML:
<form>
<table class="box-element" th:if="${ not#lists.isEmpty(kitchenRecipes)}">
<div class="header">Available meals</div>
<tr>
<th style="padding-left: 50px">Image</th>
<th>Meal</th>
<th>Calories</th>
<th>Order</th>
</tr>
<tr th:each="kitchenRecipe : ${kitchenRecipes}">
<td style="float: left!important; margin-left: 10px!important;"><img class="row-image" src="https://www.pikpng.com/pngl/b/64-643199_simple-food-coming-soon-food-clipart.png"></td>
<td style="text-align:center; vertical-align: middle;"><a th:text="${kitchenRecipe.recipeDto.title}"></a></td>
<td style="text-align:center; vertical-align: middle;"><a th:text="${kitchenRecipe.recipeDto.calories}"></a>Calories</td>
<td style="text-align:center; vertical-align: middle;"><a th:href="@{/order/{kitchenId}/{recipeId}(kitchenId=${kitchenRecipe.kitchenDto.id},recipeId=${kitchenRecipe.recipeDto.id})}">View</a></td>
</tr>
</table>
</form>
CSS:
.box-element{
border-radius: 8px;
padding: 10px;
margin-bottom:30px;
text-align: center;
vertical-align: middle;
}
.header {
background: #ff416c;
background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
background: linear-gradient(to right, #ff4b2b, #ff416c);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: white;
font-size: 1.5em;
padding: 1rem;
text-align: center;
text-transform: uppercase;
padding: 10px;
border-radius: 8px 8px 0px 0px;
width: 80%
}
背景如下所示:
任何幫助將不勝感激
您的代碼是正確的,無論是來自瀏覽器的緩存還是來自您正在使用的任何營銷工具,請檢查 class 寫的“kitchenRecipes”,重新檢查它們,可以通過測試
<tr style="background:#ccc;">
檢查它是否在表格行中反映灰色。
在 header class 中設置了微紅色,但我看不出你已經給出了足夠的 CSS 來顯示為什么整個表格(或多或少)具有該背景顏色。
無論如何,請注意 header 顏色雖然最初設置為顏色,但隨后設置為線性漸變。 元素可以同時具有 - 背景顏色通過背景圖像的任何透明部分顯示。
background: #ff416c;
background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
background: linear-gradient(to right, #ff4b2b, #ff416c);
查看所有 CSS 並檢查任何類似這樣的線性漸變,如果它們看起來像這種微紅色,請將它們注釋掉。 這應該可以幫助您找出這些單元格的顏色。
更好的是 go 到瀏覽器的開發工具並檢查一個單元格,看看是什么將背景設置為紅色。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.