獲取按鈕鼠標懸停在圖像

Question

嗨，大家好，我正在試圖讓我的按鈕在bootstrap 3重疊我的形象，我明白z-index 1的使用，但我似乎無法讓它工作。

HTML：

.btn-warning { 
 
    color: #fff; 
 
    background-color: rgba(255, 198, 0, 0.9); 
 
    border: 0; 
 
    padding: 20px; 
 
    border-radius: 26px; 
 
    line-height: 0.428571; 
 
} 
 

 
.aboutpic { 
 
    margin-bottom: 19px; 
 
}

<div class="aboutpic"> 
 
    <img src="//via.placeholder.com/350x150" class="img-responsive"> 
 
    <button type="button" class="btn btn-warning">Download CV</button> 
 
</div>

Answer 1

試試這個：

.btn-warning { 
color: #fff; 
background-color: rgba(255,198,0,0.9); 
border: 0; 
padding: 20px; 
border-radius: 26px; 
line-height: 0.428571; 
position: absolute; 
z-index: 1; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 

你需要添加一個position: absolute;和z-index: 1的按鈕，以便它可以坐在圖像的頂部。

codepen.io/lauraeddy/pen/KXEwOW

Answer 2

請嘗試以下，

.btn-warning { 
 
    color: #fff; 
 
    background-color: rgba(255,198,0,0.9); 
 
    border: 0; 
 
    padding: 20px; 
 
    border-radius: 26px; 
 
     line-height: 0.428571; 
 
} 
 
img{ 
 
    height:200px; 
 
    width:200px; 
 
} 
 

 
.aboutpic{ 
 
    position:relative; 
 
} 
 

 
.first{ 
 
    position:absolute; 
 
    z-index:1; 
 
} 
 
.second{ 
 
    position:absolute; 
 
    z-index:2; 
 
    left:20px; 
 
    top:50px; 
 
}

<div class="aboutpic"> 
 
    <div class="first"> 
 
      <img src="https://static.pexels.com/photos/377911/pexels-photo-377911.jpeg" class="img-responsive"> 
 
    </div> 
 
    <div class="second"> 
 
      <button type="button" class="btn btn-warning">Download CV</button> 
 
    </div> 
 

 
    </div>

希望這有助於。

Answer 3

可以的aboutpic到relative位置和按鈕設置爲absolute，如在下面的例子。

UPDATE

添加樣式屬性在一個任意大小的圖像中心的按鈕，利用calc(50% - [button width or button height])。

.btn-warning { 
 
    color: #fff; 
 
    background-color: rgba(255, 198, 0, 0.9); 
 
    border: 0; 
 
    padding: 20px; 
 
    border-radius: 26px; 
 
    line-height: 0.428571; 
 
    width: 120px; 
 
    height: 50px; 
 
} 
 

 
.aboutpic button { 
 
    position: absolute; 
 
    top: calc(50% - 25px); 
 
    left: calc(50% - 60px); 
 
} 
 

 
.aboutpic { 
 
    margin-bottom: 19px; 
 
    position: relative; 
 
    width: 350px; 
 
    height: 150px; 
 
}

<div class="aboutpic"> 
 
    <img src="http://via.placeholder.com/350x150" class="img-responsive"> 
 
    <button type="button" class="btn btn-warning">Download CV</button> 
 
</div>