CSS 图像周围有白环

Question

我正在尝试创建一个流动的操作按钮，但英国国旗周围有一个白色的圆环，这是我不想要的。我希望两面旗帜位于英国国旗上方的中央。我不介意英国国旗和白环一样大。我欢迎对代码有任何其他评论

document.querySelector('.lang-dropbtn').addEventListener('click', function(event) {
  document.querySelector('.lang-dropdown-content').classList.toggle('show');
  event.stopPropagation(); // Stop propagation to prevent window click handler from closing the dropdown immediately
});

window.onclick = function(event) {
  if (!event.target.closest('.language-dropdown')) {
    var dropdowns = document.getElementsByClassName("lang-dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      dropdowns[i].style.display = 'none';
    }
  }
}

.language-dropdown {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-block;
  z-index: 2000;
  /* Ensuring it is above other content */
}

.lang-dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  /* Rounded button */
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  bottom: 70px;
  /* Adjusted for spacing */
  z-index: 1;
  padding: 5px;
  /* Padding around flags */
}

.lang-dropdown-content .lang-a {
  color: black;
  display: block;
  margin: 5px 0;
  /* Vertical spacing between flags */
}

.lang-dropdown-content .lang-a .lang-img {
  width: 50px;
  height: auto;
  border-radius: 50%;
  /* Make images circular */
  display: block;
  margin: auto;
  /* Center align images */
}

.language-dropdown:hover .lang-dropdown-content {
  display: block;
  /* Show dropdown on hover */
}

<div class="language-dropdown">
  <button class="lang-dropbtn">
    <img class="lang-img" src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/171f64-06f6-0f4b-8e88-7b2cded67131_british_flag.png" alt="British" style="width:40px;height:auto;">
  </button>
  <div class="lang-dropdown-content">
    <!-- <a class="lang-a" href="/en"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/171f64-06f6-0f4b-8e88-7b2cded67131_british_flag.png" alt="British"></a> -->
    <a class="lang-a" href="/cn"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/e0bb117-b0a2-40b-0145-11ae625b76ca_chinese_flag.png" alt="Chinese"></a>
    <a class="lang-a" href="/ar"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/7c2c8b5-343-6aa2-240-dd2613be2af8_saudi_flag.png" alt="Arabic"></a>
  </div>
</div>

Answer 1

对于英国国旗周围的白色，你是否尝试过含蓄地说

background: none

，去掉白色？至于其余的，也许可以尝试使用

display: grid

，因为它会使对齐更加简单。我不是专业人士，所以如果你看到我犯了错误，请让我知道，我也想学习:)