css - CSS 和动态宽度 (100%) 连同幻灯片

Question

我使用如何使 HTML/CSS 幻灯片背景褪色？

但是，此解决方案要求图像具有固定大小。一旦我添加了动态宽度（宽度 = 100%），图像就会覆盖文本。

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

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

有什么建议如何让 width=100% 同时避免图像覆盖文本？

Answer 1

设置.fadein img也是相对的位置。

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

Answer 2

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

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

p {
    position: absolute;
}

此外，文本应始终包含在某个标签中（p、span 等）

Answer 3

你必须给容器一个固定的高度和宽度div。除非这样做，否则您的图像将如何达到 100%？我的意思是100%是什么？图像的父级是div，因此是 100% div。

看到这个更新的小提琴：http: //jsfiddle.net/2kkHH/350/

如果你做到了div100%，那么 100% 是什么？在这种情况下，它将占用您页面的 100%。

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子项中推断出其高度，因此您必须“手动”设置高度。