图片不适合背景图片

Question

我正在尝试使用引导程序和 css 构建一个页面，当鼠标指针放在图像上时，图像会褪色并显示背景图像。图像褪色很好，但不适合，尽管它们的大小都是 100 像素（所有尺寸）并且可以看到空白。链接：http://codepen.io/Ishtiaque/pen/ONPRyp?editors=1100 这是我的代码：

<div class="portfolio">
  <h2>Portfolio</h2>
  <div class="row position">
    <div id="project1" class="col-xs-6">
      <img src="http://thumb1.shutterstock.com/display_pic_with_logo/3617441/376416154/stock-vector-phonebook-icon-phonebook-icon-eps-phonebook-icon-vector-phonebook-icon-eps-phonebook-icon-jpg-376416154.jpg">
    </div>
    <div id="project1" class="col-xs-6">
      <img src="http://thumb1.shutterstock.com/display_pic_with_logo/3617441/376416154/stock-vector-phonebook-icon-phonebook-icon-eps-phonebook-icon-vector-phonebook-icon-eps-phonebook-icon-jpg-376416154.jpg">
    </div>
  </div>
</div>

CSS 部分：

#project1 {
  background-image: url("https://t1.ftcdn.net/jpg/00/33/60/96/160_F_33609643_L3xInzQroBP4PX8zaZICZqofvvfRxZW9.jpg");
  background-size: 100px;
  width: 100px;
  height: 100px;
}

#project1 img {
  width: 100px;
  height: 100px;
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
}

#project1 img:hover {
  opacity: 0;
}

.portfolio {
  padding-top: 50px;
  overflow: auto;
  background: url(http://4k-background.com/highresolution/l_011.jpg)no-repeat center center fixed;
  background-size: cover;
  height: 500px;
}

.position {
  padding-left: 70px;
}

Answer 1

刚刚用你的 codepen 调整并修复它，背景中的 div 上有填充。我设置了padding: 0px;，现在很好。

CSS

#project1{

background-image:url("https://t1.ftcdn.net/jpg/00/33/60/96/160_F_33609643_L3xInzQroBP4PX8zaZICZqofvvfRxZW9.jpg");
background-size: cover;
padding: 0px;
}

#project1 {
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}
#project1 img:hover {
    opacity: 0;
}
.portfolio{
    padding-top:50px;
    overflow:auto;
    background:url(http://4k-background.com/highresolution/l_011.jpg)no-repeat center center fixed;
    background-size:cover;
    height:500px;
}
.position{
    padding-left:70px;
}

.image {
  width: 120px;
  height: 100px;
}

只需用这个替换你的 CSS。

编辑：哦，顺便说一下，将class="image" 添加到两个图像标签