無法設置表格單元格背景正確

Question

.pointy { 
 
    background-image: url('img/Header.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    font-size: 40px; 
 
    background-color: orange; 
 
}

<div style="margin-top: 100px"> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
</div>

我試圖添加圖像作爲背景，並實現了設計，如下圖所示。

My Design

但遺憾的是我不能得到它的工作。這是我現在的結果。

Actual Result

P.S橙色背景添加只是清楚地看到它。

Answer 1

另一個選擇是僅使用CSS創建效果...如果您想要動畫或懸停效果，這很有用。

.pointy { 
 
    color: white; 
 
    font-size: 40px; 
 
    background-color: #000; 
 
} 
 

 
.pointy td { 
 
    position: relative; 
 
} 
 

 
.pointy td::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -40px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 0; 
 
    height: 20px; 
 
    border-bottom: solid 20px #000; 
 
    border-left: solid 20px transparent; 
 
    border-right: solid 20px transparent; 
 
}

<div style="margin-top: 100px"> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

您的背景比單元格大。要將背景圖像居中，必須將background-position:center添加到類.pointy。請看下面的例子：

.pointy { 
 
    background-image: url('http://placehold.it/200x40'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position:center; 
 
    color: white; 
 
    font-size: 25px; 
 
    height:40px; 
 
    background-color: orange; 
 
    vertical-align:bottom; 
 
}

<div style="margin-top: 100px"> 
 
    <table style="float: left;"> 
 
     <tr class="pointy"> 
 
      <td>TITLE</td> 
 
     </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
     <tr class="pointy"> 
 
      <td>TITLE</td> 
 
     </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
     <tr class="pointy"> 
 
      <td>TITLE</td> 
 
     </tr> 
 
    </table> 
 
</div>

您可以優化您的表結構。所以，你也可以使用下面的例子：

table { 
 
    margin-top:100px; 
 
} 
 
thead th { 
 
    background-image: url('http://placehold.it/200x40'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position:center; 
 
    color: white; 
 
    font-size: 25px; 
 
    height:40px; 
 
    background-color: orange; 
 
    vertical-align:bottom; 
 
}

<table> 
 
    <thead> 
 
    <th>TITLE</th> 
 
    <th>TITLE</th> 
 
    <th>TITLE</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>CONTENT</td> 
 
     <td>CONTENT</td> 
 
     <td>CONTENT</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

也許你需要添加

background-position:center; 

，改變

background-size: cover; 

到

background-size: contain; 
or 
background-size: 100%; 

Answer 4

看起來背景比你的手機大。

您可以在此描述嘗試使用background-size：

https://developer.mozilla.org/en/docs/Web/CSS/background-size

可能將其設置爲 '遏制' 會給你關閉導致：

包含

的關鍵字縮放圖像儘可能大，並保持圖像寬高比（圖像不會變形）。圖像在容器內是letterbox。當圖像和容器具有不同的尺寸時，空白區域（左側/右側的頂部/底部）會填充背景顏色。

一般來說，您需要確保單元尺寸（寬度/高度）與圖像完全匹配。

Answer 5

你應該使用background-position

Answer 6

設置background-position:center和調整TD的一些填充可以做的伎倆。

下面是工作的代碼：

table { 
 
    width: 33%; 
 
} 
 

 
.pointy { 
 
    background-image: url('https://i.stack.imgur.com/JQISJ.png'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    font-size: 20px; 
 
    background-position: center; 
 
    text-align: center; 
 
    vertical-align: bottom; 
 
} 
 

 
.pointy td { 
 
    padding: 18px 0 5px 0; 
 
}

<div style="margin-top: 100px"> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
    <table style="float: left;"> 
 
    <tr class="pointy"> 
 
     <td>TITLE</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 7

對於相關信息，以更好地利用html標籤（hx或th）或CSS顯示的一例的（inline-block， flex或grid）

h2, 
 
th { 
 
    font-size: 30px; 
 
} 
 
.ib {white-space:nowrap;}/* keep a single line*/ 
 
.ib h2 { 
 
    display: inline-block; 
 
} 
 

 

 
table { 
 
    border-spacing: 4px 0 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.flex h2 { 
 
    margin: 0 2px; 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, 235px); 
 
    grid-gap: 4px; 
 
    min-width:800px; 
 
} 
 

 
/* bg it is about background-size. image missing replaced with average gradient*/ 
 

 
.title { 
 
    padding: 1.5em 3em 0.5em; 
 
    color: white; 
 
    background: linear-gradient(to bottom, transparent 1em, black 1em), linear-gradient(45deg, black 44%, transparent 45%) right top no-repeat, linear-gradient(-45deg, black 44%, transparent 45%) left top no-repeat; 
 
    background-size: auto, 50% 100%, 50% 100%; 
 
}

<h1>header + h2 inline-block; </h1> 
 
<header class="ib"> 
 
    <h2 class="title">title</h2> 
 
    <h2 class="title">title</h2> 
 
    <h2 class="title">title</h2> 
 
</header> 
 
<h1>table header, th </h1> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="title"> title</th> 
 
     <th class="title"> title</th> 
 
     <th class="title"> title</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 

 
<h1>header + h2 and flex </h1> 
 
<header class="flex"> 
 
    <h2 class="title">title</h2> 
 
    <h2 class="title">title</h2> 
 
    <h2 class="title">title</h2> 
 
</header> 
 

 
<h1>header + h2 and grid </h1> 
 
<header class="grid"> 
 
    <h2 class="title">title</h2> 
 
    <h2 class="title">title</h2> 
 
    <h2 class="title">title</h2> 
 
</header>