0

div次のリンクのように、スライドショーにタグを追加する方法

http://www.hellofresh.com/

ここではdiv、スライドショーの上に「DISCOVER THE JOY OF COOKING」というタイトルが表示されています。

どうすればこれを行うことができますか?

4

5 に答える 5

2

まず、Stackoverflowへようこそ(おっと、これは最初の質問ではありません!)。divスライドショー (または他の要素) の上に配置するための鍵は、絶対配置を使用することです。絶対配置を使用すると、要素をドキュメントの流れに任せるのではなく、要素の正確な位置を指定できます。サンプル Web サイトの CSS を見ると、「divDiscover the joy of cook」を含む が基本的に次のようにスタイル設定されていることがわかります。

position: absolute;
top: 0px;
left: 0px;

top原点の位置が異なることを除いて、2 次元グリッド システムのleftように機能します。上に引っ張って左に引っ張るので、全体として、左上隅に配置されます。xytop: 0px;divleft: 0px;div

半透明の黒の効果を得るには、opacityプロパティを使用します。は半透明であることをopacity: 0.5;意味し、まったく表示されないことを意味します。あなたのお気に入りの値は、範囲内の何かのようなものかもしれません。divopacity: 0;opacity: 0.7;0...1

ここでの最後の部分は、 がスライドショーの後ろではなく、スライドショーの上divにあることをブラウザーに伝えることです。これを行うには、プロパティを使用します。要素の相対的な「スタック順序」を指定します。したがって、スライドショーの上に表示したい場合は、たとえば でスライドショーをスタイリングしながら でスタイリングします。z-indexz-indexdivz-index: 5;z-index: 1;

それがまったく役に立ったことを願っています！

于 2012-08-25T09:13:10.617 に答える
1

わかりました、次のようなことができます ( http://jsfiddle.net/YgpqX/ ):

<div class="div1"></div>
<div class="div2"></div>​

​.div1 {
  width: 320px;
  height: 200px;
  background: #aa5;
}

.div2 {
  width: 100px;
  height: 100px;
  margin-top: -200px;
  background: #5aa;
}
​

または ( http://jsfiddle.net/YgpqX/1/ )

<div class="div1"></div>
<div class="div2"></div>​

.div1 {
  position: relative;
  width: 320px;
  height: 200px;
  background: #aa5;
}

.div2 {
  position: relative;
  width: 100px;
  height: 100px;
  top: -200px;
  background: #5aa;
}

そして、html のブロックがスライダー ブロックよりも前にある必要がある場合は、それz-index: 9999;を取得するために使用します。

また、絶対位置:

<div class="div1">
  <div class="div2"></div>
</div>
​
.div1 {
  position: relative;
  width: 320px;
  height: 200px;
  background: #aa5;
}

.div2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #5aa;
}
于 2012-08-25T09:04:09.700 に答える
0

彼らは、CSS ポジショニングを使用してこの効果を実現しています。基本的に、彼らはスライドショーよりも料理ブロックの発見を完全に位置づけています。絶対位置 div で z-index を使用して、相対位置 (スライドショー) div の上に移動できます。基本的に、位置と z-index の組み合わせを使用する必要があります。ここに CSS/HTML の基本的な例があります: http://jsfiddle.net/jqVAe/1/

HTML:

<div id="slideshow">
    Scrolling sideshow goes here.  Scrolling sideshow goes here.  Scrolling sideshow goes here.  Scrolling sideshow goes here.  Scrolling sideshow goes here. Scrolling sideshow goes here.Scrolling sideshow goes here.
    <div id="over-slideshow"></div>
</div>

CSS:

    #slideshow{
        width: 400px;
        height: 200px;
        position: relative;
        background: green;    
    }

#over-slideshow{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    background: red;    
}

これにより、スライドショーを配置するための基本的な構造が提供されます。優れたスライド ショー プラグインを見つけて、その機能を再発明しようとしないことをお勧めします。このタスクを実行できる Jquery (Javascript Framework) プラグインはたくさんあると思います。

于 2012-08-25T09:12:24.390 に答える
0

position: absoluteとを試すことができz-indexます。z インデックスは、レイヤーをレイヤーの上または下に配置するために使用されます。あなたは通過するかもしれません。

レッスン 15: z-index を使用したレイヤーのレイヤー (Layers)、 CSS z-index の理解、およびz-index CSS プロパティの詳細な外観

于 2012-08-25T09:15:43.517 に答える
0

opacityCSSでプロパティを設定する

これは、このW3schools Css opaqueに関する基本的な情報です。

于 2012-08-25T09:05:00.900 に答える