I define a code block to show an icon in the source html page in google chrome extension like this:

<div id="translate-btn" style="">
        <button type="button" >
          <span >Translate</span>
        </button>
      </div>

when the user click the words on the original web page, show the icon. I changed the div visible or hidden in the javascript code. this is the css define:

#translate-btn {
  position: absolute;
  z-index: 9999999999;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
}

#translate-btn .bp3-button {
  padding: 2px;
  min-width: 0;
  min-height: 0;
  width: 48px;
  height: 48px;
}

#translate-btn .btn-icon {
  width: 38px;
  height: 38px;
  background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/logo.png');
  background-size: contain;
}

.bp3-dark #translate-btn .btn-icon {
  width: 38px;
  height: 38px;
  background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/logowhite36.png');
}

#translate-btn.show {
  display: block;
}

now I found the problem is that the span element added Translate words, the background image show with the words Translate, when did not add the Translate word, the background image did not show. why did this happen? what should I do to fix this problem to make the image always show no matter add the Translate or not?

CodePudding user response：

Why no background-image

span is a generic inline container. In this case, it practically means that it'll collapse when there's no content inside. That is, background-image doesn't have any space to fill.

How to address

Should you want the background image always visible without any content inside, you could consider:

• Adding it to the parent button element
• Using a block level container for .btn-icon

Also, You could reconsider the use of background-image altogether. Is it really a background? Why can't it be an img instead? Or perhaps a Base64 encoded inline content?