2

我尝试了以下代码:

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 中运行良好?

4

4 回答 4

3

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>
于 2013-11-01T05:53:22.537 回答
2

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

于 2013-10-30T06:36:22.807 回答
0
    .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>
于 2013-10-30T06:48:15.127 回答
0

在这种情况下,尝试将类移动到每个 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>
于 2013-10-30T12:11:19.380 回答