文章/答案/技术大牛

发布

社区首页 >问答首页 >重叠的div标签背景图像未显示

问重叠的div标签背景图像未显示
EN

Stack Overflow用户

提问于 2011-07-12 15:05:06

回答 1查看 1.6K关注 0票数 0

我正在和另外两个家伙一起做一个实习项目。正在尝试创建一个html web应用程序，该应用程序在理想情况下将尽可能接近此布局。

Ipad twitter应用程序

我的朋友正在使用jquery创建可拖动和可调整大小的div标记，我正在处理这些外观。

目前，我正在尝试在可拖放的div标记中创建一个新的div标记。但是，新div标记中的文本与以前的div标记文本重叠，并且新div的背景色没有显示出来。我一直在玩z指数，但没有用。

如能提供任何帮助，将不胜感激。

<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link rel="stylesheet" 
type="text/css" href="testcss.css" />
</head>
<style>
    #ipad { width: 1024; height: 768;}
    #draggable { width: 150px; height: 768px; padding: 0.5em;}
</style>

    <script>
    $(function() {
        $( "#draggable" ).draggable({ axis: "x" },{containment: "#ipad"});
    });
    </script>



<div id="ipad">

<div id="draggable"class="ui-widget-content">
    <div="topbar">
    <p> topbar </p>
    </div>

    <p>Drag me around</p>
</div>

</div>
</html>

这是CSS文件

body{
background-color:black;


}

div#ipad{
 /* fallback */
  background-color: #2F2727;
  background-image: url(images/radial_bg.png);
  background-position: center center;
  background-repeat: no-repeat;

  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460,             from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Opera cannot do radial gradients yet :(  */

}


 div#draggable{
 z-index:1;
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.08, rgb(110,110,110)),
    color-stop(0.18, rgb(135,135,135))
   );
background-image: -moz-linear-gradient(
    center top,
    rgb(110,110,110) 8%,
    rgb(135,135,135) 18%
    );
}


div#topbar{
    margin-top:300px;
    z-index:2;

}

css

html

回答 1

Stack Overflow用户

发布于 2011-07-12 15:15:51

首先，纠正HTML代码中的一些错误：

你应该有个doctype标签。
样式和脚本标记应该在head标记中。
你没有任何身体标记。
<div="topbar">应该是<div id="topbar">

然后，您就有了可以按预期工作的东西：http://jsfiddle.net/RgGdc/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6666400

复制

相似问题

问重叠的div标签背景图像未显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重叠的div标签背景图像未显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重叠的div标签背景图像未显示
EN