0

我们如何div在幻灯片上添加标签，如下面的链接

http://www.hellofresh.com/

在这里div，标题为“发现烹饪的乐趣”被放置在幻灯片上。

我该怎么做？

4

5 回答 5

2

首先，欢迎来到Stackoverflow（哎呀，这不是您的第一个问题！）。将您div的幻灯片放在幻灯片上（或任何其他元素上）的关键是使用绝对定位。绝对定位使您能够指定元素的确切位置，而不是将其留在文档流中。如果您查看示例网站的 CSS，您会发现div“发现烹饪的乐趣”的样式基本上是这样的：

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

top并且left以某种方式x在y二维网格系统中运行，除了原点的放置方式不同。向上top: 0px;拉并向左拉，所以总而言之，它位于左上角。divleft: 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;，例如。

希望有帮助！

于 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

通过opacity在 CSS 中设置属性

这是关于这个W3schools Css opaque的一些基本信息

于 2012-08-25T09:05:00.900 回答
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 框架）插件可以为您完成这项任务。

于 2012-08-25T09:12:24.390 回答
0

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

第 15 课：使用 z-index 逐层（图层）、了解 CSS z-index和详细了解 z-index CSS 属性

于 2012-08-25T09:15:43.517 回答