我在将 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中的overlay类
imgoverlay{
position:absolute;
left:0px;
right:0px;
}
不确定我在这里做错了什么，我还在学习 css/html
最佳答案
缺少指示 imgoverlay 是 css 类的点。
.imgoverlay {
position:absolute;
left:0px;
right:0px;
}
如果没有点，浏览器会查找名为 imgoverlay 的标签。
使用点，浏览器会查找任何具有 imgoverlay 类的元素。
关于html - 用jquery在html中覆盖按钮img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21531532/