Question

我只是被搞得很简单：

我正在使用<i class="glyphicon glyphicon-remove-sign"></i>我要添加到图片的右上角：

<div class="relative">
    <i class="glyphicon glyphicon-remove-sign"></i>
    <img src="anything.jpg">
</div>

但X是透明的。因此，如果我将背景颜色更改为白色，图标周围的方形空间也会变白 - 这不应该是。

我只想获得一个带有白色X的黑色图标 - 如果可能的话，在圆圈周围有一个白色边框。

所以我也尝试使用glyphicon glyphicon-remove-circle并将颜色设置为白色。但如果我将背景颜色设置为黑色，我会遇到同样的问题

Answer 1

使用与字体大小相同的边框半径。

.glyphicon-remove-sign {
    background: white;
    border-radius: 12px;
    font-size: 12px;
    padding: 5px;
}

Answer 2

最后我做到了，我希望我做对了。

＆＃13;

container{
  position: relative;
}

i{
  left: 240px;
  top: 0;
  color: white;
  background: black;
  border-radius: 50%;
  padding: 5px;
  border: 2px solid white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <img src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00286-256x256.jpg" alt="">
 <i class="glyphicon glyphicon-remove" style="position:absolute"></i>
</div>

＆＃13;

圆形字形和（背景）颜色的问题

2 个答案: