围绕股利引导

Question

我试图做到这一点样机2个按钮......

...我来到这里，我需要把图像上的这些按键2点。我设法把一个按钮，但第二个不工作。这是第一个按钮的代码。

#img_container { 
 
    position:relative; 
 
    display:block; 
 
    text-align:center; 
 
} 
 
.button { 
 
    position:absolute; 
 
    bottom:50%; 
 
    right:50%; 
 
    width:200px; 
 
    height:50px; 
 
    margin:0px -100px -15px 0px; 
 
    background-color: rgb(246, 175, 228); 
 
    border: none; 
 
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);; 
 
    font-size: 1.3em; 
 
    color: white; 
 
    text-transform: uppercase; 
 
}

<div id="img_container" class=" "text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <img src="img/homepicture.jpg"/> 
 
    <button class="button">lazybop</button><br> 
 
    <button class="button1">see the products</button> 
 
</div>

然后我试图使用相同的代码，而只是降低底层财产的数量到40％，但它仍然在同一个地方。

.button1 { 
    position:absolute; 
    bottom:40%; 
    right:50%; 
    width:200px; 
    height:50px; 
    background-color: rgb(246, 175, 228); 
    border: none; 
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);; 
    font-size: 1.3em; 
    color: white; 
    text-transform: uppercase; 
} 

Answer 1

你必须在课堂上的错误

class=**" "**text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 

Answer 2

<div id="img_container" class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <img src="img/homepicture.jpg"/> 
 
    <button class="button">lazybop</button><br> 
 
    <button class="button1">see the products</button> 
 
</div>

类删除单个“或复制粘贴上面的代码

http://quandaflow.com/category/website/css/

Answer 3

这里有一个办法做到这一点：

更换<img>与容器上的背景图片，以及与设备与100vh高度定义这个容器的高度。

<div id="img_container" class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div id="button-container"> 
      <button class="button button1">lazybop</button> 
      <button class="button button2">see the products</button> 
    </div> 

</div> 

#img_container { 
    background-image: url("http://www.w3schools.com/css/img_fjords.jpg"); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:100vh; 
    position:relative; 

    /* Flexbox part, to align the button vertically : */ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

#button-container{ 
    position:relative; 
} 
.button { 
    position:absolute; 
    left:50%; 
    width:200px; 
    height:50px; 
    background-color: rgb(246, 175, 228); 
    border: none; 
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);; 
    font-size: 1.3em; 
    color: white; 
    text-transform: uppercase; 
} 
.button1{ 
    margin-left:-100px; 
    z-index:10; 
} 

.button2{ 
    top:50px; 
} 

这里有一个的jsfiddle：DEMO

注意：垂直居中的按钮，我用Flexbox的。 但是，如果你不想使用Flexbox的，你可以取代它与改造：

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}