折叠按钮上的图像

时间:2017-04-03 10:30:47

标签: html css

我可以放置图片而不是按钮折叠并显示文字吗?

<button class="btn btn-info" style="background-color: #60bf3b; color: white;" type="button" data-toggle="collapse" data-target="#fatture">Per D.D.T. e Fatture:</button>
<div id="fatture" class="collapse">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
</div>

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

如果您希望按钮具有背景,则可以尝试此操作(fiddle) 只需设置

.btn {
  background: url("https://i.ytimg.com/vi/FhZrU6g9seg/maxresdefault.jpg") no-repeat transparent;
  background-size: cover;
}

并确保你也包含这3个:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

除非您只想让图片作为按钮使用,否则您可以执行此操作image fiddle

答案 1 :(得分:0)

<div class="container">
<img data-toggle="collapse" data-target="#demo" src="button.png" width="50px">
      <div id="demo" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>