Question

我在将文本放入Bootstrap井的背景中时遇到问题。我首先发布了问题in this question，但这是对我的问题的过于简单的表示。我正在寻找创建的效果in this jFiddle，菜单背景中的文字。这个例子是我想要工作的方式，但当我把它放在Bootstrap Well中时，我得到了this (http://jsfiddle.net/aBqw8/21/)。

背景文字消失了，它可能落后于Well。当我从井中移除背景颜色时，我可以看到文本。如果我从跨度中删除“position：relative”它会显示标题，但它会干扰菜单，这就是我想要避免的。

Answer 1

在CSS中将z-index从-1更改为正（我喜欢1000，所以它总是在顶部）

看到这个小提琴：http://jsfiddle.net/aBqw8/22/

Answer 2

试试这个：

<强> HTML

<div class='well'>
    <div class='bg-title'>
      <span class='title'>TITLE GOES HERE</span>
    </div>
    <ul class='nav nav-pills'>
        <li><a href='#'>menu1</a></li>
        <li><a href='#'>menu2</a></li>
    </ul>
</div>

<强> CSS

.bg-title {
    height: 100%;
    position: relative;
    width: 100%;
}

.title {
    display: block;
    font-size: 47px;
    font-weight: bold;
    opacity: 0.2;
    position: relative;
    text-align: right;
    top: 37px; // whatever ...
    z-index: 90; // Must be behind your .nav-pills, if you use "-1" it will go behind the .well!
}

.nav-pills {
    //include ...
    z-index: 99;
}

注意： Bootstrap正在使用z-index：1000到1050的某些元素 - 所以尽量不要使用这个范围，否则你可能会遇到另一个冲突 - 检查_variables.scss（或.less）

在Bootstrap井的背景文本

2 个答案: