Question

我正在按照本教程Here隐藏图像。但是即使使用

，我的图像仍然显示

显示：无；

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img class="img-ban" src="img/banner.jpg" alt="banner">
    <div class="wrapper">
        <article class="imh-info">
            <h1>Yooo</h1>
            <p>Kasd sed justo no invidunt et duo ea ipsum nonumy, sed ea no aliquyam nonumy et, consetetur sed et lorem erat accusam, takimata dolor ipsum rebum sadipscing eirmod labore. Est consetetur justo duo ipsum erat dolore,</p><p> et justo dolore elitr dolores et dolor. Diam sit lorem takimata dolor ut at voluptua, et lorem et eos lorem. Stet diam ipsum dolores elitr accusam eirmod. Ut et accusam ipsum rebum voluptua magna est. Justo eirmod dolor no duo magna consetetur accusam labore,.</p>
        </article>
        <img class="img-worker" src="img/work.jpg" alt="worker">
    </div>
</body>
</html>

这是我的样式。css：

    *{
        margin:0;
        padding: 0;

     }    

     .wrapper
     {
         width: 100%;
     }

     .img-ban{        
         display: none;    
      }

     .img-info
     {
         width:100%;    
     }

     .img-info h2
     {
         padding:30px 30px 20px;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 50px;
         color:#111;
         line-height: 44px;        
     }

     .img-info p
     {
         padding:0px 30px 20px;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 60px;
         color:#111;
         line-height: 24px;      
     }

     .img-worker
     {
         width:100%;
     }

    @media only screen and (min-width:768px)
    {
        .img-ban{
            display: block;
            width:100%;
            padding-bottom: 30px;
        }

        .wrapper
        {
            width: 600px;
            margin: 0 auto ;
        }

        .img-info h2
        {
            padding:20px 0px 0px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .img-info p
        {
             padding:20px 0px 0px;
        }

        .img-worker{
            background-size:contain;
            height: 100%;
            padding-top: 50px;
        }
    }

    @media only screen and (min-width:1000px)
    {

    }

我尝试使用CTRL + F5刷新页面并清除chrome缓存，但问题仍然存在。如果有人可以指导我确定问题出在哪里，我将非常感激。

CSS Display None不适用于图片标签

0 个答案: