调整图像内容大小以适应 :before CSS 片段

Question

.responsive td.head1:before {
    content: url(myimage.png )
}

我想将一张图片放入响应式表格列中（我使用这个方法将列标题放置在类似于CSS技巧描述的此处的行中）。不同之处在于，我的“标题”包含图像。这些图像需要重新缩放以适应大小，但是使用background-size等方法时似乎无法实现。那么有没有办法重新缩放/调整图像？
更新：感谢您关于使用background-image的建议-如果有人能告诉我如何在:before段落中获取带有残疾遵从性的alt /描述标签的图像，则会得到额外的奖励分数。

- vogomatix

---

为伪元素指定高度和宽度，并将图像用作背景。 - Paulie_D

请查看有关“alt”标签的更新答案。 - Nico O

Answer 1

将背景图像添加到此项中，类似于这里：http://jsfiddle.net/4rB5X/1/

.responsive th:nth-child(1):before {
    content: "";
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(http://www.placehold.it/30x30);
    background-repeat: no-repeat;
    background-position: top left;
    vertical-align: middle;
}

th
{
    vertical-align: middle;
}

针对你关于这些图片的alt标签的问题：

你确实可以使用content作为伪alt标签。你可以使用属性来定义所需的文本。以下是示例：

http://jsfiddle.net/4rB5X/2/

CSS

/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
    content: attr(data-img-alt);
}

/* Hide Text from content */
th.hide-text:before
{
  text-indent: -99999px;
  overflow: hidden;
  text-align: left; 
}

HTML

<thead>
  <th class="hide-text" data-img-alt="Lalala">Test</th>
  <th>Test</th>
</thead>

更新：

正如 @vogomatix 指出的那样，content 属性不能为 null，但至少应该是一个空字符串（content:""; 可以接受）。如果想要一个解决方法，请尝试以下操作：

th:before
{
  content: "";
}

th[data-img-alt]:before
{
  content: attr(data-img-alt);
}

- Nico O

---

感谢您的回复。对于其他正在尝试此操作的人，请注意，似乎需要某种形式的内容值才能使其正常工作，即使它是一个空字符串。 - vogomatix

Answer 2

你可以为类添加背景图片并进行样式设置。试一下这个...

name{
background-image:url("url here");
background-size:80px 60px;
}

- Mudassir