股利用文本和按鈕是藍色backgound

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> 

我其中有一個背景圖像和一個div一個mainContainer上。內部div有一個文本和圖像。這就是我所做的。

我希望我的最終html看起來像這樣。對不起，我正在使用油漆來製作我的最終輸出，並且按鈕從橢圓變爲方形。只是略過這一點。我的想法是在文本下面放置按鈕，maincontainer div背景應該是藍色的。由於

我想這樣JsFiddle但按鈕定位應該是在底部。我用頂級來改變它，但它是固定

Answer 1

首先，你將同時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 2

最新更新時間：

針對comment- 我猜你只需要添加樣式=「背景：藍色;」然後。

<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 3

有很多方法可以實現這一點 - 但上述圖像的快速和骯髒的近似：

#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 4

這裏是我認爲小提琴是你所描述的 http://jsfiddle.net/ps0gfnr3/1/

最大的變化是

• 使圖像成爲外部div的background-image，這樣將更多元素放在頂部使其更容易定位
• 使用藍色框的容器，像span或h1這樣的元素不應該被賦予像CSS這樣的屬性width和height。

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