Question

我有一张按钮背景图片。但是，图像不适合<li>标记内的元素。但是，如果我将按钮放在ouside <li>内，将会得到预期的结果。

下面是<li>中图片的示例

这是<li>

之外的图片

这是我的<html>代码：

<ul class="dropdown-menu dropdown-menu-right p-2 text-center w-20em" aria-labelledby="userDropdown">
            <li>
                <img src="~/images/user.png" class="rounded-circle img-fluid p-3 w-50">
                <p>
                    Someone's Name
                </p>
            </li>
            <li>
                <!-- Here's the link code -->
                <div class="row">
                    <div class="col-md-6">
                        <a class="btn-gold form-control" asp-page="/Password/Edit">Change</a>
                    </div>
                    <div class="col-md-6">
                        <a class="btn-gold form-control" asp-page="/Auth/Logout">Logout</a>
                    </div>
                </div>
            </li>
        </ul>

这是我为btn-gold

定制的类

.btn-gold {
  background: url(/images/button.png);
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  color: white;

  &:hover {
      cursor: pointer;
  }
}

有人可以帮助我在<li>标签中放入图片吗？谢谢

Answer 1

只需删除按钮类型的form-control类，并添加填充以显示按钮背景图像即可。希望此解决方案会有所帮助。

.btn-gold {
  background: url('http://www.clker.com/cliparts/I/Z/c/6/W/I/small-button-md.png');
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  color: white !important;
  padding: 8px 20px 12px 20px;
  cursor:pointer;    
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul class="p-2 text-center w-20em" aria-labelledby="userDropdown">
    <li>
        <img src="~/images/user.png" class="rounded-circle img-fluid p-3 w-50">
        <p>
            Someone's Name
        </p>
    </li>
    <li>
        <!-- Here's the link code -->
        <div class="row">
            <div class="col-md-6 mb-3">
                <a class="btn-gold" asp-page="/Password/Edit">Change</a>
            </div>
            <div class="col-md-6 mb-3">
                <a class="btn-gold" asp-page="/Auth/Logout">Logout</a>
            </div>
        </div>
    </li>
</ul>

Answer 2

如果您要实现的是圆角样式，最好的方法是使用 border-radius 和bootstrap的css样式化按钮 btn类 属性。

有关更多信息，请参见this link。如果要对引导句进行更改，请不要在CSS上添加！important值。

请注意，使用样式和类而不是图像是更好的做法，因为图像会使您的应用程序的响应速度降低，并且处理起来更加僵化。有关更多信息，请参见this。

.round{
border-radius: 30px !important;
}

<!-- Bootstrap importation -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<button type="button" class="btn btn-primary">Basic</button> This has default bootstrap round corners<br>

<br>if somehow you are using links try the link tag:<br>

<br><a href="#" class="btn btn-primary" role="button" aria-disabled="true">this is a link</a> here we made use of the "role" option and the bootstrap classes<br>

<h2> Changing round corners</h2><br>

<button type="button" class="btn btn-primary round">Basic</button> 30px round corner. notice how we also made the use of "!important" property on css in order to override bootstrap's default css properties<br>

如何设置背景图像适合元素

2 个答案: