html - 如何使用css隐藏图像外的背景？

Question

如何使用css隐藏图片外的背景？

测试我的代码时。它会像这样显示

但我想应用我的代码来显示这样

我该怎么做？

.plainmodal-close{
     position: absolute;
    width: 45px;
    height: 45px;
    right: 50%;
    top: 0px;
    background: url(http://www.entypo.com/images/circle-with-cross.svg) no-repeat;
    background-color: red;
    border-radius: 50%;
    border: 3px solid green;
    }

<div class="plainmodal-close"></div>

Answer 1

无法按照您想要的方式进行操作，因为无法通过 css 修改图像。您可以向托管图像的容器添加一些样式，仅此而已。

但是，更好的方法是使用网络字体，如 font-awesome并使用 CSS 来获得您喜欢的效果。

.fa-stack .fa.fa-times 
{ 
  color: red; 
  border-radius: 50%;
  background-color: white;
  border: 3px solid green;
}

.fa-stack .fa.fa-circle 
{ 
  opacity:0.0;  
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
</span>