Question

我正在为一家公司实习，业主已经询问是否有可能将网站右侧显示的随机图片淡化到页面底部附近（这很平淡，会去详见下文）。

到目前为止，我已经设置了一个测试网站，这是一个页面example。该网站使用Joomla CMS（不是我的选择）。如果你看右边有一个音乐家的图像，每次刷新都会拉出一个不同的音乐家/图像。我的老板要我做的事情（因为显然我自从改造他们的网站以来我的工作很少）是在图像下使用其他页面高度慢慢过渡到背景颜色的渐变渐变，从黑色开始透明（我假设背景颜色会更容易）。到目前为止，我的想法是，这是非常不可能的，但我想我会问你们。

我的主要问题是页面的高度右列与页面高度的高度动态匹配...如果可能的话。我知道如何使它渐变，但高度问题让我烦恼！

整个右列的CSS（显然没有渐变）是：

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

如果检查页面上的源代码，随机图像会显示在一个名为“random-image”的类中，我强烈感觉它是由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;
}

这将使右列的高度正确延伸，允许您添加渐变。

Answer 2

使用下面的css和一个div，你的作业将完成

td { position: relative; }
.bg-gradient { background: blue; min-height: 100%; width: 200px; position: absolute; z-index:-1; }

将此div添加为“.columnrt”

下的第一个孩子

<div class="bg-gradient"></div>

在css

中给出你想要'.bg-gradient'的背景渐变

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

2 个答案: