html - 交叉淡入淡出的背景没有响应

Question

计划是将第二张图片交叉淡入淡出到第一张图片的顶部。我以前用过同样的代码，但这次它被破坏了。我更改了页边距，但情况只会变得更糟。

因为我是新手，所以可以为我指明正确的方向，我已经尝试更改各种参数，所以问题是缺乏理解，而不是缺乏修复它的尝试。问题似乎出在背景上，但我已经添加了使背景响应的代码。

jsfiddle: https://jsfiddle.net/eL16s504/

html:

<center>
    <div class="first-row bord crossfd">
        <div class="column-left">
            <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" width="200px">
            <h3 class="people-title">KEVIN BRYAN</h3>
            <h3 class="second-title"><em>Interior Designer – Partner</em></h3>
        </div>


        <div class="column-center bord crossfd">
            <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" width="200px">
            <h3 class="people-title">TOBY SCOTT</h3>
            <h3 class="second-title"><em>Architect Director – Partner</em></h3>
        </div>

        <div class="column-right bord crossfd">
            <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px">
            <h3 class="people-title">MURIEL MOORE</h3>
            <h3 class="second-title"><em>Architect Manager – Partner</em></h3>
        </div>
    </div>
</center>

<center>
    <div class="second-row">
        <div class="column-left2 bord crossfd">
            <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px">
            <h3 class="people-title">POK BENJAMIN</h3>
            <h3 class="second-title"><em>Interior Manager – Partner</em></h3>
        </div>

        <div class="column-right2 bord crossfd">
            <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px">
            <h3 class="people-title">POK BENJAMIN</h3>
            <h3 class="second-title"><em>Interior Manager – Partner</em></h3>
        </div>
    </div>
</center>

CSS:

.bord{
    -webkit-box-sizing: border-box;
}

.crossfd{
    background: url("http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/crossfade2.png");
    display: inline-block;
    font:size: 0;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

.crossfd img{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.crossfd img:hover{
    opacity: 0;
}

.first-row { margin-left: 150px; margin-right: 150px; }
.second-row { margin-left: 270px; margin-right: 270px; }
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-left2 { float: left; width: 50%; }
.column-right2{ float: right; width: 50%; }

Answer 1

Background-size:contain - 将图像缩放到最大尺寸，使其宽度和高度都能适应内容区域，并且位置中心无助于将图像集中在您的结构中。

看看这个结构，

.bord{
     
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
         display:block;
         }
.crossfd{
    background: url("http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/crossfade2.png");
     
       background-repeat : no-repeat;
       background-position
   background-size: cover;
     width:200px;
             }
.crossfd img{
               
                 width:200px;
               //  display:block;
                 -webkit-transition: opacity 1s ease-in-out;
                 -moz-transition: opacity 1s ease-in-out;
                 -o-transition: opacity 1s ease-in-out;
                 transition: opacity 1s ease-in-out;
            
                    }
.crossfd img:hover{
                    opacity: 0;
                               }                        
                               
.center{
   margin:0 auto;
  
}                               

.column-3{ 
   
     width:33%; 
     display:table-cell;
    
     }
    
    .column-2{ 
   
     width:50%; 
     display:table-cell;
    
     }
     

<center>

    <!-- Row 1-->
    <div class="row">
        <div class="column-3">
           <div class="bord crossfd">
               <img src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" />
           </div>
            <h3 class="people-title">KEVIN BRYAN</h3>
            <h3 class="second-title"><em>Interior Designer – Partner</em></h3>
        </div>
        
        <div class="column-3">
           <div class="bord crossfd">
              <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" >
           </div>
           <h3 class="people-title">TOBY SCOTT</h3>
           <h3 class="second-title"><em>Architect Director – Partner</em></h3>
        </div>
        
         <div class="column-3">
           <div class="bord crossfd">
              <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" >
              </div>
            <h3 class="people-title">MURIEL MOORE</h3>
            <h3 class="second-title"><em>Architect Manager – Partner</em></h3>
        </div>
        
    </div>
    <!-- Row 2-->
   <div class="row">
        <div class="column-2">
           <div class="bord crossfd">
               <img src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" />
           </div>
            <h3 class="people-title">KEVIN BRYAN</h3>
            <h3 class="second-title"><em>Interior Designer – Partner</em></h3>
        </div>
        
        <div class="column-2">
           <div class="bord crossfd">
              <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" >
           </div>
           <h3 class="people-title">TOBY SCOTT</h3>
           <h3 class="second-title"><em>Architect Director – Partner</em></h3>
        </div>
        
         
        
    </div>

</center>