无法设置表格单元格背景正确

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>