HTML背景图片如何转换为CSS？

Question

我创建了一个非响应式网站的现有项目。现在我需要改变为响应式网站。我需要将我的标志图片更改为响应式站点吗？我已经更改了，但它没有起作用。

   <td colspan="2"  style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" >

这段代码是我的网站标志图片，如何将此图片更改为完全响应式的标志？

我已经在HTML中创建了一个类文件，例如：

  <td class="img1">

我的 CSS 代码：

  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  {

    .img1{
         background-image:url('site_conf/images/det_banner.jpg');
         background-repeat:no-repeat; 
         background-position:center; 
         width:100%;
         Height:100;
      } 
}

它在响应式中不起作用？我的代码有什么错误吗？

- Thennarasu

---

在您的 CSS 代码中，您输入了 "ackground-repeat"。您确定您的图像在正确的文件夹中并且名称正确吗？ - La masse

我的代码没有拼写错误，但是无法正常工作。我在这里放了一部分代码——包括标志图片代码和CSS。 - Thennarasu

background-image:url('../site_conf/images/det_banner.jpg'); 尝试一下 - missellorin

我从未见过有人使用表格制作响应式网站。 - James King

詹姆斯·金，我将把代码表更改为 div 标签。 - Thennarasu

高度使用大写字母H。不确定是否有效。高度未指定单位。同时您可以尝试background-size: cover属性。 - Palash

Answer 1

img1类被分配给<td>，因此应添加background-size属性以使图像占据宽度的100％大小。

CSS

.img1 {
    background-image: url('site_conf/images/det_banner.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% ;
    width: 100%;
    Height: 100px;
}

注意：由于您现有的代码是在表格结构中，我不能百分之百确定我的解决方案是否可行。但您可以尝试一下。如果您能创建一个fiddle，那么指导您将会更容易。

- Nilesh Mahajan

---

这可能是因为你的 <td> 标签的 width 属性。请在开发者工具中进行检查。 - Nilesh Mahajan