Question

我正在尝试在按钮顶部渲染一个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>

Answer 1

您必须设置某种宽度，高度和显示规则，以告诉浏览器如何呈现元素。我使用了一个以margin: 0 auto;为中心的20x20px的块元素，并使用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>

Sass CSS：背景图片未显示后

1 个答案: