如何使用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>

来源

2017-09-28 สุทธการ ทวีบุญล้น

尽量不要对问题提供信息时，例如使用外部网站图像（imgur）和代码（jsfiddle）。只需使用SO提供的内置功能添加/编辑您的问题。记录在外部网站上的信息会随着时间流逝而丢失或删除。 –

.plainmodal-close{ 
 
    position: absolute; 
 
    width: 45px; 
 
    height: 45px; 
 
    right: 50%; 
 
    top: 0px; 
 
    border-radius: 50%; 
 
    border: 3px solid green; 
 
    box-sizing: 
 
} 
 
.plainmodal-close > span{ 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; right: 0; 
 
    margin: auto; 
 
    width: 30px; 
 
    height: 7px; 
 
    background-color: red; 
 
    transform: rotate(45deg); 
 
} 
 
.plainmodal-close > span::after{ 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; right: 0; 
 
    margin: auto; 
 
    width: 30px; 
 
    height: 7px; 
 
    background-color: red; 
 
    transform: rotate(90deg); 
 
}

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

这个怎么样？

我想使用纯CSS建议。

我不能暗示答案。

我可以建议的替代方案。

来源

2017-09-28 12:13:04 zynkn

它不可能做到这一点，你要为图像无法通过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>

来源

2017-09-28 12:25:46

由于箱阴影很有趣：

.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 center center; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
    box-shadow: inset 0 0 0 4px green; 
 
}

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

来源

2017-09-28 15:05:53 Creaforge

简单而有效:)我喜欢它。 –

如何使用CSS隐藏背景图像？

回答

相关问题