我在让这种淡入淡出效果发挥作用时遇到了一些困难。我基本上有两个图像叠在一起，并且有一个悬停效果，使顶部图像的不透明度变为零，从而显示第二个图像。
当我只有一个部分时，此效果当前有效。当我添加另一个部分时，一切都变得不合适了。我怀疑这与我使用 position:absolute 有关，但我不确定如何修复它。
我做了一个简单的例子来向您展示正在发生的事情。这是一个部分(功能性)的样子:
<body>
<header>
<h1>Projects</h1>
<h3>
<a href="/">Home</a> | <a href="#">GitHub</a>
</h3>
</header>
<hr>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
</body>
header {
text-align: center;
}
section {
width: 960px;
margin: 0 auto;
}
.container {
position: relative;
}
img {
position: absolute;
width: 650px;
height: 400px;
display: block;
}
.main {
z-index: 5;
transition: opacity .3s ease-in-out;
}
.main:hover {
opacity: 0;
}
您可以在这里看到:http://jsfiddle.net/503dhw51/
当我尝试使用两个部分时，整个事情都崩溃了。这是两个部分的代码:
<body>
<header>
<h1>Projects</h1>
<h3>
<a href="/">Home</a> | <a href="#">GitHub</a>
</h3>
</header>
<hr>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
</body>
CSS 是相同的。
这是它的 jsfiddle:http://jsfiddle.net/5asgswxr/1/
我基本上有两个问题需要解决:
- 使其适用于多个部分
- 修复第一部分后，以某种方式将图像居中
对于这些问题中的任何一个问题，我将不胜感激。提前致谢!
最佳答案
Here is my attempt 。您可以将其与其他标签一起使用，而不是图像。
/*assures images to be of the same size*/
.frame { height: 300px; width:300px; }
/* code for effect you are looking for*/
figure { overflow: hidden; position: relative; border:solid lightgray 2px;}
.img1 { left: 0; position: absolute; right: 0; top: 0;
-webkit-transition: all 100ms ease-out;-moz-transition: all 500ms ease-out;transition: all 500ms ease-out;
border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;
}
.img1:hover { opacity: 0;}
/** important having things not "float" around*/
.clearfix:after { content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
编辑:啊..我应该在发布我的内容之前查看其他提交内容。对不起。
关于html - 将一个图像淡入另一个图像过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29200364/