图像不适合背景图像

Question

我正在尝试使用bootstrap和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

只需使用ur 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"添加到两个图片代码