Question

我尝试过几件事，但运气不好。我有一个包含文本的图像需要设置为div或表的背景图像。我尝试使用background-size：cover，但是当我这样做时，图像和里面的文字会变形。如何在没有任何失真的情况下设置背景图像，并在调整大小时保持纵横比？更快的响应将有所帮助，因为我在尝试了几件事情后感到沮丧而没有任何成功。

原始图片：https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon

<table width="100%" border="0" cellspacing="10" cellpadding="150" style="background-image:url(https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon); width: 100%; height: 100%; border:none; margin:0px; background-size: cover;">
<tr > 
<td width="80%" >
Test
</td>
<td width="20%" > 
Test
</td>
</tr>
</table>

这是小提琴： http://jsfiddle.net/d95hd1dL/5/

谢谢。

Answer 1

试试这个：

<强> HTML：

<table width="100%" border="1" cellspacing="10" cellpadding="150">
 <tr > 
  <td width="80%" >
  Test
   </td>
    <td width="20%" > 
    Test
  </td>
</tr>
</table>

<强> CSS：

table{
  background: #000 url(https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon);
  height: 100%;
  border: none;
  margin: 0px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center; 
}

示例：http://jsfiddle.net/d95hd1dL/6/

Answer 2

你需要尝试背景大小：100％自动;背景大小：封面;

<table width="100%" border="1" cellspacing="10" cellpadding="150" style="background-image:url(https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon); border:none; background-size:100% auto; margin:0px; ">
 <tr > 
  <td width="80%" >
  Test
   </td>
    <td width="20%" > 
    Test
  </td>
</tr>
</table>

调整表背景图像的大小而不会丢失纵横比并使其响应

2 个答案: