Question

我尝试了以下代码：

CSS：

.bg_left{
        background-image: url(path/image.jpeg);
        background-repeat: no-repeat;
        background-position: left bottom;
         background-color: #FF0000;
         color:#FFFFFF;
         height:150px;

}
table{width:100%;}

HTML：

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 responsive website tutorial</title>

</head>
<body>
<table>
   <tr class="bg_left">
      <td>Helloo
      </td>
      <td>Logout</td>
    </tr>
</table>
</body>
</html>

但是为什么它在Chrome中重复，而它在IE和Firefox中运行良好？

Answer 1

CSS

.bg_left{
  background-image: url(images/banner1.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment:fixed;
  background-color: #FF0000;
  color:#FFFFFF;
  height:150px;
}
table{
  width:100%;
}

HTML 的

<table>
   <tr class="bg_left">
      <td>Helloo</td>
      <td>Logout</td>
    </tr>
</table>

Answer 2

类名是您的HTML bg_left。但是你使用bg-left是你的CSS文件

Answer 3

    .bg_left{
        background-image: url(images/6.jpg);
        background-repeat: no-repeat;
        background-position: left bottom;

}
<table>
   <tr class="bg_left">
      <td>
      </td>
    </tr>
</table>

Answer 4

在这种情况下，请尝试将课程移至td。

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 responsive website tutorial</title>
    <style type="text/css">
        .bg_left {
            background-image: url('http://s1.wallippo.com/thumbs/300x250/background-black-chaninja-hexican-vista-wave-windows-e18886707bb2610e73c06c8f8574c7c5.jpeg');
            background-position: left bottom;
            background-repeat: no-repeat;
            background-color: #FF0000;
            color: #FFFFFF;
            height: 150px;
        }

        table {
            width: 100%;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="bg_left">
                Helloo
            </td>
            <td class="bg_left">Logout</td>
        </tr>
    </table>
</body>
</html>

在chrome中不工作css背景属性

4 个答案: