Question

我遇到了将bootstrap glyphicon图像覆盖在背景img上的问题，并将其作为按钮点击。

我也在为我要显示的其他页面使用jquery模板样式，例如flipboard样式页面。

这是html代码，问题是最后一个代码段

<body>
    <div id="st-container" class="st-container">
        <div class="st-pusher">
        <nav class="st-menu st-effect" id="menu">
           <img src="" style="height:50px;" alt="" />
            <ul id="url-list"></ul>
        </nav>

        <script id="pageTmpl" type="text/x-jquery-tmpl">
            <div class="${theClass}" style="${theStyle}">
                <div class="front">
                    <div class="outer">
                        <div class="content" style="${theContentStyleFront}">
                            <div class="inner">{{html theContentFront}}</div>
                        </div>
                    </div>
                </div>
                <div class="back">
                    <div class="outer">
                        <div class="content" style="${theContentStyleBack}">
                            <div class="inner">{{html theContentBack}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </script>

这是故障代码 - 如果我删除了style =“float：left”按钮是可点击的 - 问题是我的正面和背面页面没有重叠，如果添加style =“float：left”那么按钮不可点击，另一方面img覆盖了正面和背面页面。

<div id="st-trigger-effects" style="float:left;">
    <button type="button" data-effect="st-effect" class="btn btn-default">
        <span class="glyphicon glyphicon-align-justify"></span>
    </button>
</div>

我厌倦了另一种变异

<div id="st-trigger-effects" class="imgoverlay">
    <button type="button" data-effect="st-effect" class="btn btn-default">
        <span class="glyphicon glyphicon-align-justify"></span>
    </button>
</div>

css适用于身体

body{
    font-family: 'Open Sans Condensed','Arial Narrow', serif;
    background: #ddd url(../img/background.jpg) repeat top left;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin: 0;
    overflow: hidden;
}

和css中的叠加层

imgoverlay{
    position:absolute;
    left:0px;
    right:0px;
}

不确定我在这里出错了，我还在学习css / html

Answer 1

缺少表示imgoverlay的点是css类。

.imgoverlay {
    position:absolute;
    left:0px;
    right:0px;
}

如果没有该点，浏览器会查找名为imgoverlay的标记。使用点，浏览器会查找具有类imgoverlay的任何元素。

使用jquery在html中叠加按钮img

1 个答案: