圆形图像或边框半径100％？

我对页面上的圆角元素有疑问。例如，我有一个不圆的小徽标，我想把它放在圆形背景（120x120）上。是不是更好的做这样的div：圆形图像或边框半径100％？

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

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

来源

2013-11-03 hugerth

使用css听起来更好，因为它允许稍后更容易地进行更改。谁将来编辑未来的标志图像可能不熟悉图像编辑软件，或者他们也许没有原始图像。 –

这取决于您的品牌 - 如果徽标应该是圆形的，那么在图像编辑程序中使用这种方式总是更容易，这样您的品牌将在所有媒体中保持一致。然而，如果它只是一个设计噱头，坚持边界半径:) – Terry

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

如果不是真的只是个人喜好，每个人都有优点和缺点。

边框半径的解决方案

，如果你想与媒体查询
更快达到你可以删除一些画面的背景。
背景大小，颜色和半径可以在后期轻松更改。
半径在任何显示器上都保持高质量/分辨率。

影像解决方案

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

来源

2013-11-03 14:20:56 Braders

确切地说，对我来说最重要的是可编辑背景，我认为这将是我网站上的不错功能。 – hugerth

两种解决方案：

使包含图像（背景DIV）在div具有边界半径，使图像宽度的100％在div的高度。

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

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

给这个图像的边框半径为独立

.background{ 
width: 200px; 
height: 200px; 
} 

.img{ 
border-radius: 5px; 
}

来源

2013-11-03 14:21:14

圆形图像或边框半径100％？

回答

相关问题