は、私は背景として画像を追加し、以下の画像のような設計を実現しようとしています適切に

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

あなたの背景はセルよりも大きいです。背景画像を中央に配置するには、クラス.pointyにbackground-position:centerを追加する必要があります。次の例を参照してください：

.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

おそらく

が閉じが起こるあなたを与えるだろう 'を含む' に設定：

が

キーワード含んでいます画像を可能な限り大きくスケーリングし、画像のアスペクト比を維持します（画像が盛り上がらない）。イメージはコンテナ内でレターボックス化されています。イメージとコンテナの寸法が異なると、空白領域（左/右の上下）が背景色で塗りつぶされます。

一般に、セルの寸法（幅/高さ）が画像と正確に一致することを確認する必要があります。

Answer 5

あなたはbackground-position:centerとトリックを行うことができますTDのいくつかのパディングを調整設定のbackground-position

Answer 6

を使用する必要があります。ここ

作業コードである：に関する情報について

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>