CSS和动态宽度（100％）以及幻灯片放映

Question

我使用How to make HTML/CSS slideshow background fade?

的答案中的技术创建了一个简单的图像推子

然而，此解决方案要求图像具有固定大小。添加动态宽度（宽度= 100％）后，图像会覆盖文本。

http://jsfiddle.net/2kkHH/340/

.fadein {
    position:relative;
    width:100%;
}

任何建议如何使宽度= 100％并同时避免图像覆盖文本？

Answer 1

您可以设置要定位的文字：

http://jsfiddle.net/jonigiuro/2kkHH/346/

p {
    position: absolute;
}

此外，文本应始终包含在某些标记（p，span等等）

中

Answer 2

您必须为容器div指定固定的高度和宽度。除非这样做，你的图像将如何100％？我的意思是100％的什么？图像的父级是div，因此是div的100％。

请参阅此更新的小提琴： http://jsfiddle.net/2kkHH/350/

如果你使div 100％，那么100％是什么？在这种情况下，它将占用您网页的100％。

Answer 3

将.fadein img的位置设置为相对。

.fadein img {
    position:relative;
    left:0;
    top:0;
}

Answer 4

您可以插入这两行代码

$('.fadein img:gt(0)').hide();
var h = $('.fadein :first-child').height(); // line to add 1
$('.fadein').height(h); // line to add 2

一切都将开始工作 - http://jsfiddle.net/5Ugkr/

原因是容器div不会从其绝对定位的img子项中推断出它的高度，因此您必须“手动”设置高度。