Question

我们如何在幻灯片中添加div标记，如以下链接

http://www.hellofresh.com/

此处标题为“发现烹饪快乐”的div放在幻灯片上。

我该怎么做？

Answer 1

首先，欢迎来到Stackoverflow（哎呀;这不是你的第一个问题！）。将div置于幻灯片放映（或任何其他元素上）的关键是使用绝对定位。绝对定位使您可以指定元素的确切位置，而不是将其留在文档流中。如果你看看your example website的CSS，你可以看到具有“发现烹饪乐趣”的div的风格基本上是这样的：

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

top和left在二维网格系统中以某种方式表现为x和y，但原点的放置方式不同。 top: 0px;向上拉div而left: 0px;向左拉div，所以总而言之，它位于左上角。

要获得半透明黑色的效果，请使用opacity属性。 opacity: 0.5;表示div是半透明的，而opacity: 0;表示它根本不可见。您最喜欢的值可能类似于opacity: 0.7; - 0...1范围内的任何内容。

此处的最后一部分是告诉浏览器div应该超过幻灯片，而不是它背后。为此，请使用z-index属性。 z-index指定元素的相对“堆栈顺序”。因此，如果您希望div覆盖幻灯片，请使用z-index: 5;设置样式，同时使用z-index: 1;设置幻灯片样式。

希望有所帮助！

Answer 2

好的，你可以这样做（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;
}

Answer 3

在CSS中设置opacity属性

这是关于此W3schools Css opaque

的一些基本信息

Answer 4

他们正在使用CSS定位来实现此效果。基本上他们绝对定位发现幻灯片放映的烹饪块的喜悦。您可以在绝对位置div上使用z-index使其超过相对位置（幻灯片）div。基本上你需要使用position和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）插件可以为你完成这项任务。

Answer 5

您可以尝试position: absolute和z-index。 z index用于在图层上方或下方对齐图层。你可以通过;

Lesson 15: Layer on layer with z-index (Layers) ， Understanding CSS z-index 和 A Detailed Look at the z-index CSS Property

在幻灯片上添加div标签

5 个答案: