html - 圆形图像或边框半径 100%？

Question

我对页面上的圆形元素有疑问。例如，我有一个不圆角的小标志，我想把它放在圆角背景 (120x120) 上。像这样制作div是否更好：

border-radius: 100%;
background-color: red;
background-image: url('logo.png');
background-position: center;

或者只是创建一个图像，例如。瘸子？

Answer 1

如果您将来要在圆形背景上使用徽标（例如传单、电子邮件等），在 gimp 或替代版本中创建徽标版本可能会更容易，因此它可以非常快速地在任何地方使用。

如果不是真的只是个人喜好，各有利弊。

边界半径解决方案

• 如果您想使用媒体查询，可以删除某些屏幕上的背景
• 更快地实现。
• 背景大小、颜色和半径可以在以后轻松更改。
• 半径在任何显示器上都保持高质量/分辨率。

图像解决方案

• 更好的浏览器支持。
• 可用于未来的出版物。

Answer 2

两种解决方案：

1. 使包含图像（背景 div）的 div 具有边框半径，并使图像宽度在 div 中的高度为 100%。

.background{
 border-radius: 5px;
 background-color: red;
 background-image: url('logo.png');
 background-position: center;
 width: 100px;
 height: 100px;
}

.img{
 width: 100%; 
 height: 100%;
}

1. 给图像一个边界半径作为独立的

   .background{
    width: 200px;
    height: 200px;
   }
   
   .img{
    border-radius: 5px;
   }