Question

我正在使用bootstrap 3，我想制作一个图像按钮，即该按钮应具有：

图像背景
按钮应该有一个自定义的半透明黑色覆盖层，悬停时会变亮，点击时会变得更暗。
固定高度（300px），宽度100％（因此它占据整个父div class="col-md-4"）。
图片应为cropped，即overflow: hidden

我尝试通过将图片设置为我的父<div>的背景并使用子<div>作为半透明叠加层来实现此目的。但我不得不写很多jquery来改变状态onhover，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

不难，只需使用css：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

您可能需要调整背景图片的大小和位置read more。

Answer 2

仅限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 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>

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

3 个答案: