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

Question

我对页面上的圆 Angular 元素有疑问。例如，我有一个不是圆形的小 Logo ，我想将它放在圆形背景 (120x120) 上。这样制作div是不是更好:

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

或者只是创建一个图像，例如。金普？

Answer 1

如果您将来打算在圆形背景上使用 Logo (例如传单、电子邮件等)，则可能更容易在 gimp 或其他替代版本中创建 Logo 版本，因此可以非常快速地在任何地方使用.

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

边界半径解决方案

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

图片解决方案

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