1

私は会社のインターンシップとして働いていますが、所有者から、ウェブサイトの右側に表示されるランダムな画像をページの下部近くまでフェードインできるかどうか尋ねられました（これは当たり障りのないものでした。詳細は以下で説明します）。 ）。

これまでにテストサイトを設定しました。これがページの例です。このサイトはJoomlaCMSを使用しています（私の選択ではありません）。右を見るとミュージシャンの画像があり、更新するたびに異なるミュージシャン/画像が表示されます。上司が私に望んでいたことは（サイトを刷新して以来、明らかにタスクが少ないため）、残りのページの高さを使用して背景色にゆっくりと移行する画像の下で黒から始まるフェードグラデーションを作成することです。透明（背景色の方が簡単だと思います）。これまでのところ、これはかなり不可能だと思いますが、とにかく皆さんに聞いてみようと思いました。

私の主な問題は、ページの高さの右側の列がページの高さの高さと動的に一致することです...可能であれば。グラデーションにする方法は知っていますが、高さの問題が私を悩ませています！

右の列全体の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と1つの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 に答える