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

你的背景比细胞大。要使背景图像居中，您必须将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 2

可能你需要添加

self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Back", style: .Done, target: self, action: #selector(self.backAction(sender:)))

func backAction(sender: AnyObject) {
     //Your Code
}

并更改

background-position:center;

到

background-size: cover;

Answer 3

你应该使用背景位置

Answer 4

背景似乎比你的细胞更大。

您可以尝试使用此处所述的background-size：

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

可能会将其设置为包含＆＃39;会给你结果：

包含

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。

通常，您需要确保单元格尺寸（宽度/高度）与图像完全匹配。

Answer 5

另一种选择是仅使用CSS创建效果...例如，如果您想要动画或悬停效果，这将非常有用。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

对于infos，更好地使用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>

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

7 个答案: