计划是将第二张图片交叉淡入淡出到第一张图片的顶部。我以前用过同样的代码,但这次它被破坏了。我更改了页边距,但情况只会变得更糟。
因为我是新手,所以可以为我指明正确的方向,我已经尝试更改各种参数,所以问题是缺乏理解,而不是缺乏修复它的尝试。问题似乎出在背景上,但我已经添加了使背景响应的代码。
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%; }
最佳答案
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>
关于html - 交叉淡入淡出的背景没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45701259/