html - 使用CSS在DIV中图像下的动态高度/渐变

Question

我在一家公司实习，老板问我是否可以将出现在网站右侧的随机图像淡化到页面底部附近(那是平淡无奇的，会去下面详细介绍)。

到目前为止，我已经建立了一个测试站点，这是一个页面 example . 该站点使用 Joomla CMS(不是我的选择)。如果你看右边有一个音乐家的图像，每次刷新都会拉出不同的音乐家/图像。我的老板想让我做的(因为显然我在改造他们的网站后任务很低)是在图像下方制作一个从黑色开始的淡入淡出渐变，该渐变使用页面的其余部分高度慢慢过渡到背景颜色或透明(我假设背景颜色会更容易)。到目前为止，我的想法是这几乎是不可能的，但我想我还是会问问你们。

我的主要问题是页面右栏的高度与页面高度的高度动态匹配...如果可能的话。我知道如何使它渐变，但高度问题困扰着我!

整个右栏(显然没有渐变)的 CSS 是:

#columnrt {
width:200px;
background-color:#673601;
float:right; }

如果检查页面上的源代码，随机图像出现在一个名为“随机图像”的类中，我有强烈的感觉它是由 Joomla 生成的...示例，因此您可以识别我是什么图像我在谈论:

<div class="random-image"><img src="/images/stories/sidebar/lubsym_nov11_017-crop.jpg" width="200" height="306"></div> 

任何输入都很好，谢谢大家!

PS:无薪实习...我不想让你们觉得我在欺骗你们!

Answer 1

如您所说，您的主要问题是使右栏与页面一样高，即向下延伸至主要内容。这可以通过添加到 CSS 来解决:

#columnrt {
width:200px;
background-color:#673601;
position:absolute;
top: 0;
right:0;
bottom:0;
}

这将使右列的高度适当扩展，允许您添加渐变。