Question

在每一行上，右边的最后一张图片留下了一点空间，我不知道如何在CSS中修复它。我试图用这6张皮特来覆盖整个页面。如果有人能解决这个问题我会很感激。

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Esthetics</title>
  <meta name="keywords" content="web design, graphic design, aesthetic,             esthetic, ui, ux, designer, wireframing, svg, logos, effects, css3, html5, css,       html, creative, responsive">
  <meta name="description" content="The Esthetics is a reliable place for you         get a design from.  There is a variety of cool free content you can input into         your projects.">

  <!-- Bootstrap -->
  <link href="./default.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./store.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>

<body>

  <div class="row">
    <div class="col-md-4" id="bg1">

      <a href="#">Explore</a>

    </div>

    <div class="col-md-4" id="bg2">
      <h3>TEst</h3>
    </div>


    <div class="col-md-4" id="bg3">
      <h2>Tesing</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4" id="bg4">
      <h1>TEsting</h1>
    </div>

    <div class="col-md-4" id="bg5">
      <h3>TEst</h3>
    </div>


    <div class="col-md-4" id="bg6">
      <h2>Tesing</h2>
    </div>
  </div>




</body>

</html>

这是CSS，每个id标签几乎相同，只是图像的变化。

      .col-md-4 {
      width: 33.33333333%;
           }
 html {
     overflow-x: hidden;
 }
 body {
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
     background-color: white;
 }
 #bg1 {
     background: url(img/item04.jpg);
     height: 303px;
     -webkit-filter: brightness(50%);
     filter: brightness(50%);
     -o-filter: brightness(50%);
     -ms-filter: brightness(50%);
     -moz-filter: brightness(50%);
     color: white;
     display: inline-block;
 }
 #bg1:hover {
     background: url(img/item04.jpg);
     height: 303px;
     opacity: 1;
     transition: all .5s ease-in-out;
     -webkit-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     -ms-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -webkit-filter: brightness(100%);
     filter: brightness(100%);
     -o-filter: brightness(100%);
     -ms-filter: brightness(100%);
     -moz-filter: brightness(100%);
     color: white
 }
 #bg2 {
     display: inline-block;
     background: url(img/item01.jpg);
     height: 303px;
     -webkit-filter: brightness(50%);
     filter: brightness(50%);
     -o-filter: brightness(50%);
     -ms-filter: brightness(50%);
     -moz-filter: brightness(50%);
     color: white
 }
 #bg2:hover {
     background: url(img/item01.jpg);
     height: 303px;
     opacity: 1;
     transition: all .5s ease-in-out;
     -webkit-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     -ms-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -webkit-filter: brightness(100%);
     filter: brightness(100%);
     -o-filter: brightness(100%);
     -ms-filter: brightness(100%);
     -moz-filter: brightness(100%);
     color: white;
     content: '\2190'
 }
 #bg3 {
     display: inline-block;
     background: url(img/item05.jpg);
     height: 303px;
     -webkit-filter: brightness(50%);
     filter: brightness(50%);
     -o-filter: brightness(50%);
     -ms-filter: brightness(50%);
     -moz-filter: brightness(50%);
     color: white
 }
 #bg3:hover {
     background: url(img/item05.jpg);
     height: 303px;
     opacity: 1;
     transition: all .5s ease-in-out;
     -webkit-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     -ms-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -webkit-filter: brightness(100%);
     filter: brightness(100%);
     -o-filter: brightness(100%);
     -ms-filter: brightness(100%);
     -moz-filter: brightness(100%);
     color: white
 }

Answer 1

可能是与您的代码冲突的默认浏览器样式。尝试将以下内容添加到CSS的顶部：html,body{margin:0;}

我无法摆脱页面上的空白区

1 个答案: