网站透明PNG图片显示方形背景而非透明效果的技术求助

不需要更换图片，问题出在模板默认CSS样式及写法错误，按以下步骤修复：

1. 修正border-radius的写法 #

你直接在<img>标签里写border-radius="50%"是无效的——这不是HTML属性，必须通过CSS设置样式。

2. 覆盖模板默认样式 #

模板的.image.main类可能自带背景色（比如白色），且容器未对图片做裁剪，导致透明PNG的区域显示出方形容器背景。添加以下CSS代码：

/* 清除logo容器内图片容器的背景色 */
#header .logo .image.main {
    background: transparent;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden; /* 裁剪超出圆形容器的部分 */
}

/* 让图片填满圆形容器并保持比例 */
#header .logo .image.main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* 确保图片本身也被裁剪为圆形 */
}

3. 保留原有HTML结构 #

你的logo部分HTML无需修改，保持如下即可：

<div class="logo">
    <span class="image main"><img src="images/eric.png" alt="" /></span>
</div>

原理说明：原模板的.logo是圆形边框容器，但内部.image.main默认带背景色且未开启溢出裁剪，导致透明PNG周围显示方形背景。通过清除背景色、添加overflow: hidden并让图片填满容器，就能让透明PNG正确显示在圆形边框内，不会出现方形底色。

内容的提问来源于stack exchange，提问作者ErocM