如何制作带图像背景的按钮？

Question

我使用自举3，我想打一个图像按钮即按钮应该具有：

• 图像背景
• 按钮应该有一个自定义的半透明的黑色覆盖的是减轻了悬停，并成为甚至更黑暗的点击。
• 固定高度（300px）和宽度100％（以便它占据整个父项​​）。
• 的形象应该是cropped即overflow: hidden

我试图通过图像作为背景设置为我的父母<div>实现这一目标，并使用了孩子<div>为半透明覆盖。但我不得不写很多jquery来改变状态onclick等。

我意识到我应该使用一个按钮，而不是一个div，但我无法设计它的样式并使其覆盖父div。

当前代码：

HTML元素：

<div class="col-md-4" style="background-image: url('...'); overflow: hidden; height: 200px; margin-bottom: 24px"> 
    <div class="img-panel translucent-overlay-light"> <!-- Should be a button or a tag --> 
    <div> 
     Hello 
    </div> 
    </div> 
</div> 

的javascript：也（理想情况下应该没有JS，这一切都应该在CSS做）

$('.img-panel').click(function() { 
    // do something 
}); 

$('.img-panel').mouseenter(function() { 
    var elm = $(this); 
    elm.removeClass('translucent-overlay-light'); 
    elm.addClass('translucent-overlay-dark') 
}).mouseleave(function() { 
    var elm = $(this); 
    elm.removeClass('translucent-overlay-dark'); 
    elm.addClass('translucent-overlay-light') 
}); 

，我无论如何使用SCSS，所以SCSS和CSS的答案都很好。

Answer 1

只有pseudo-elements CSS。希望这对你有用。

.col{ 
 
    width:50%; 
 
    display:block; 
 
} 
 

 
.img-panel{ 
 
    position:relative; 
 
    height: 200px; 
 
    background-image: url('https://placeimg.com/640/480/any'); 
 
    background-size:cover; 
 
    color:white; 
 
} 
 

 
.img-panel:after{ 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:0; 
 
    position:absolute; 
 
    transition:0.2s; 
 
} 
 

 
.img-panel:hover:after{ 
 
    background:rgba(0,0,0,0.5) ; 
 
} 
 

 
.img-panel:active:after{ 
 
    background:rgba(0,0,0,0.8) ; 
 
}

<div class="col col-md-4"> 
 
    <div class="img-panel translucent-overlay-light"> 
 
     Hello 
 
    </div> 
 
</div>

Answer 2

不难，只是使用CSS：

.my-button { 
 
    display: block; 
 
    position: relative; 
 
    height: 300px; 
 
    line-height: 300px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding: 0 10px; 
 
    text-align: center; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, .2); 
 
    cursor: pointer; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
    background: url('https://placeholdit.imgix.net/~text?txtsize=23&bg=22ffdd&txtclr=000000&txt=&w=250&h=250'); 
 
} 
 
.my-button::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, .4); 
 
} 
 
.my-button:hover::after { 
 
    background: rgba(0, 0, 0, .2); 
 
} 
 
.my-button:active::after { 
 
    background: rgba(0, 0, 0, .8); 
 
}

<div class="my-button"> 
 
    Click me 
 
</div>

你只需要调整背景图像的大小和位置，read more。

Answer 3

据我了解，您需要类似的东西，请检查this。这是纯粹的CSS解决方案。

.btn-wrap { 
 
    .btn-wrap__input { 
 
    width: 100%; 
 
    height: 300px; 
 
    position: absolute; 
 
    z-index: 3; 
 
    margin: 0; 
 
    opacity: 0; 
 
    &:checked { 
 
     + .btn-wrap__overlay { 
 
     opacity: .7; 
 
     } 
 
     &:hover { 
 
     + .btn-wrap__overlay { 
 
      opacity: .7; 
 
     } 
 
     } 
 
    } 
 
    &:hover { 
 
     + .btn-wrap__overlay { 
 
     opacity: .5; 
 
     } 
 
    } 
 
    } 
 
    .btn-wrap__button { 
 
    height: 300px; 
 
    width: 100%; 
 
    } 
 
    .btn-wrap__back { 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 100%; 
 
    z-index: 1; 
 
    color: white; 
 
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7ixV_dB22rsPTNwbph6uHl62bSSNHK_TQLw1gMOPmoWErkRdK'); 
 
    
 
    } 
 
    .btn-wrap__overlay { 
 
    background: black; 
 
    opacity: 0; 
 
    height: 300px; 
 
    position: absolute; 
 
    z-index: 2; 
 
    width: 100%; 
 
    } 
 
}

<div class="col-md-4 btn-wrap"> 
 
    <div class='btn-wrap__button'> 
 
    <input type='checkbox' class='btn-wrap__input'> 
 
    <div class="btn-wrap__overlay"></div> 
 
    <div class="btn-wrap__back"></div> 
 
    </div> 
 
</div>