1

我正在一家公司实习，老板问是否可以将网站右侧出现的随机图像淡化到页面底部附近（这很乏味，将在下面详细介绍）。

到目前为止，我已经建立了一个测试站点，这是一个页面示例。该网站使用 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：无薪实习……我不想让你们认为我在偷偷摸摸！

4

2 回答 2

0

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

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

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

于 2013-03-01T00:59:46.337 回答
0

使用下面的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'

于 2013-03-01T07:04:06.807 回答