Question

嗨这是我的fiddle代码

<div id="maincontainer">
            <img id="image" src="http://i.share.pho.to/b75f672b_o.jpeg" title=""> 
             <div id="container">
                    <h1 class='jtextfill' id="h1">
                    This is a sample text
                    </h1>
             <button class="btn" type="button">Click Me!</button> 
            </div>
</div>

我有一个maincontainer，它有一个背景图像和一个div。内部div有文本和图像。这就是我所做的。

我希望我的最终html看起来像这样。对不起，我正在使用油漆来进行最终输出，按钮从椭圆变为方形。跳过这一点。我的想法是在文本下面有按钮，maincontainer div背景应该是蓝色。感谢

enter image description here

我想要这样JsFiddle，但按钮位置应位于底部。我使用top来改变它但它是固定的

Answer 1

最新更新：

回应评论 - 我想你只需要添加style =“background：blue;”然后

<div id="maincontainer" style="background-image:url(http://i.share.pho.to/b75f672b_o.jpeg); width:350px; height:300px; position:relative;">
             <div id="container" style="background:blue; position:absolute; bottom:0px; left:0px; padding:15px; margin:15px;">
                    <h1 class='jtextfill' id="h1">This is a sample text</h1>
             <button class="btn" type="button">Click Me!</button> 
            </div>
</div>

我认为这就是你要找的东西。如果您知道自己在使用CSS做什么，那么您显然希望将其从行中删除并进入样式表。如果你不知道你在用CSS做什么，那就把它放在那里，它会没事的。

<div id="maincontainer" style="background-image:url(http://i.share.pho.to/b75f672b_o.jpeg); width:200px; height:200px;">
             <div id="container">
                    <h1 class='jtextfill' id="h1">This is a sample text</h1>
             <button class="btn" type="button">Click Me!</button> 
            </div>
</div>

如果您希望文本和按钮位于容器DIV的底部，那么您需要添加更多的内联CSS，整个HTML代码将如下所示

<div id="maincontainer" style="background-image:url(http://i.share.pho.to/b75f672b_o.jpeg); width:200px; height:200px; position:relative;">
             <div id="container" style="position:absolute; bottom:0px; left:0px;">
                    <h1 class='jtextfill' id="h1">This is a sample text</h1>
             <button class="btn" type="button">Click Me!</button> 
            </div>
</div>

为了让你的定位恰到好处，你需要增加：0px;或许：5px;或：10px;例如。

Answer 2

有很多方法可以达到这个目的 - 但上面快速而肮脏的近似图像：

#maincontainer {
    background:url('http://i.share.pho.to/b75f672b_o.jpeg');
    height:300px;
    width:300px;
    position:relative;
}
#container {
    width:90%;
    height:50%;
    position:absolute;
    top:40%;
    left:4%;
    padding:1%;
    background:blue;
    color:#ffffff
}
.btn {
    width:40%;
    color:#ffffff;
    font-size:20px;
    padding:5px 2px;
    background:lightblue;
    border:none;
    position:absolute;
    left:10px;
    bottom:20px;
}

FIDDLE

Answer 3

这是一个小提琴，我认为是你所描述的 http://jsfiddle.net/ps0gfnr3/1/

重大变化是

使图像成为外部div的background-image，这样可以将更多元素放在顶部更有意义，更容易定位
使用蓝色框的容器，不应该给像span或h1这样的元素width和height等css属性。

Answer 4

首先，您将h1标题和按钮放在bluebg div容器中，该容器位于：

内

<div id="container">
  <div class="bluebg">
    <h1>
    This is a sample text
    </h1>

    <button class="btn" type="button">Click Me!</button> 
</div>
</div>

将图片作为背景添加到#container ID：

#container {
    background-image: url(http://i.share.pho.to/b75f672b_o.jpeg);
    padding: 30px;
}

设置bluebg容器的背景颜色：

.bluebg {
    background-color:#0000FF;
}

删除h1的绝对定位：

h1 {
    background-color:#0000FF;
    color:#FFFFFF;
}

示例：http://jsfiddle.net/aLuctvm6/1/

Answer 5

我使用div容器position:absolute，但主容器position:realite用于执行效果。

#maincontainer{
    position:relative;
}

#container{
    position:absolute;
    top:50px;
    left:10px;
        background-color:#0000FF;
}
h1 {

color:#FFFFFF;

}
.btn {
  display:block;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;top:590px;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

示例：fiddle

Div有文本和按钮是蓝色背景

5 个答案: