我正在尝试在按钮顶部渲染一个png图标。 :after元素位于呈现的html中,但大小为0x0,并且图标未出现。 my-button
是呈现按钮的通用Web组件
.grouped-buttons {
button {
margin: 0;
border-radius: 0;
height: 28px;
width: 50px;
border: 1px solid rgba(193,203,214,0.8);
background: linear-gradient(#fff, #f2f6fa)
}
:first-child button {
border-radius: 100px 0 0 100px;
border-right: none;
&:after {
content: "";
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAL1JREFUWAntlzEOxSAMQz9fPR0H5nrtxGLJwnGHZnCXimDS6MUqMH7iM+e8RakkW2sNRfhXRF9qUuBb+pebQPXQzu96OC3eBN13e4LD9YZLpLquPcEUWG0p6ul+iN6s/vfwQzhW86fFSK46bk/Q3otPHjrNqyTbE0yBaiuZLgQZGTUegioppgtBRkaNh6BKiulCkJFR4yGokmI6+zx4uqOc5llBGE+LkUh13J6g7EG8Y1RJuPr2BFOg29q97gF+mSBWRkZEXAAAAABJRU5ErkJggg==");
height: auto;
width: auto;
}
}
}
<div class="grouped-buttons">
<my-button >
<button > </button>
</my-button>
<my-button >
<button > </button>
</my-button>
<my-button >
<button > </button>
</my-button>
</div>
最佳答案
您必须设置某种宽度,高度和显示规则,以告诉浏览器如何呈现元素。我使用了一个20x20px的块元素,以margin: 0 auto;
为中心,并使用background-size: contain;
设置图像大小。我将您的scss改写为css,并删除了my-button标记,使其可以在代码段中正常工作,但这些情况在您的环境中应该没问题。
.grouped-buttons button {
margin: 0;
border-radius: 0;
height: 28px;
width: 50px;
border: 1px solid rgba(193, 203, 214, 0.8);
background: linear-gradient(#fff, #f2f6fa)
font-size: 0;
}
.grouped-buttons button:first-child {
border-radius: 100px 0 0 100px;
border-right: none;
}
.grouped-buttons button:first-child:after {
content: "";
display: block;
margin: 0 auto;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAL1JREFUWAntlzEOxSAMQz9fPR0H5nrtxGLJwnGHZnCXimDS6MUqMH7iM+e8RakkW2sNRfhXRF9qUuBb+pebQPXQzu96OC3eBN13e4LD9YZLpLquPcEUWG0p6ul+iN6s/vfwQzhW86fFSK46bk/Q3otPHjrNqyTbE0yBaiuZLgQZGTUegioppgtBRkaNh6BKiulCkJFR4yGokmI6+zx4uqOc5llBGE+LkUh13J6g7EG8Y1RJuPr2BFOg29q97gF+mSBWRkZEXAAAAABJRU5ErkJggg==");
height: 20px;
width: 20px;
background-size: contain;
}
<div class="grouped-buttons">
<button> </button>
<button> </button>
<button> </button>
</div>
关于html - Sass CSS:背景图片未出现后,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52048069/