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

背景大小：包含 - 将图像缩放到最大尺寸，使其宽度和高度都适合内容区域，位置中心无助于将图像集中在结构中。

看看这个结构，

＆＃13;

.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;
    
     }

＆＃13;

<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>

＆＃13;

交叉淡化的背景没有响应

1 个答案: