Question

当屏幕宽度值低于500px时，我想更改标题标签内的内容。所以我写了这段代码。

<header>
        <table style="width:100%" class="deneme">
            <tr>
                <td id="baslik" class="logo" width="53%">Some Text Here</td>
                <td width="23%"></td>
                <td><img src="bannerpic.png" height="115px" width="170px"></td>
            </tr>
        </table>

</header>

我也把它写到我的课程页面

@media screen and (max-width:  500px) {
    .deneme{
        background-image: url(bannerpic.png);
    }
}

当我使用background-color：red作为示例时效果很好。它实际上是以这种方式工作但问题是我想要清理标题并仅在我的宽度值低于500时显示bannerpic而不是当我使用我在这里写的代码时它显示我这样的东西

http://puu.sh/swfNa/16cb398a98.jpg

如果我的宽度值低于500，我想要它只显示图像没有文字:)

Answer 1

感谢您的帮助：）

@media screen and (max-width: 500px) {
    .deneme {
        background-image: url(bannerpic.png);
        background-repeat: no-repeat;
    }
    .deneme tr {
        opacity: 0;

}
}

此代码非常有效:)

Answer 2

如果您将表格内容设置为display: none，那么表格不会有width和height，您可以使用opacity: 0或visibility:hidden隐藏表格内容，否则您需要为表格设置宽度或高度。

@media screen and (max-width: 500px) {
  .deneme {
    background-image: url("http://puu.sh/swfNa/16cb398a98.jpg");
  }
  .deneme tr {
    opacity: 0;
  }
}

<header>
  <table style="width:100%" class="deneme">
    <tr>
      <td id="baslik" class="logo" width="53%">Some Text Here</td>
      <td width="23%"></td>
      <td>
        <img src="bannerpic.png" height="115px" width="170px">
      </td>
    </tr>
  </table>
</header>

在这里输入代码

Answer 3

使用CSS选择器

（伪类.not（）{} :not() - CSS | MDN

所以你的代码。

@media screen and (max-width: 500px) { .deneme td :not(class for td's img here.){ display:none; } }

更改屏幕尺寸

3 个答案: