无重复中心与封面

时间:2015-04-25 01:09:40

标签: css html5 css3

background: no-repeat center center;之间的区别 和background-size: cover;

两者在我的网站上实现与背景图像基本相同的效果。就我在结果中所说的而言,没有区别。

1 个答案:

答案 0 :(得分:3)

background: no-repeat centre centre; 是说在元素中放置一个背景图像,但只显示它的一个实例(no-repeat),尝试查看background-repeat属性以查看其他选项。

CSS然后将图像放在元素的垂直centre和水平centre中。这与background-position属性有关。

您可能值得尝试将图像尺寸缩小到10px x 10px以下,以查看无重复效果,重复x重复效果,重复y重复效果。

background-size:声明你想要多大的背景图像(这允许动态调整图像大小,就像html img标签中的高度和宽度一样),这是CSS3中引入的属性。

默认情况下,这是背景图片的默认/原生分辨率。通过使用be cover值,您可以将背景图像缩放为尽可能大,以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

我已在每个属性上放置链接,以便您可以看到每个属性的可能值。我建议您查看w3schools上的所有background- *属性。在左侧看,它们都列出了;)

或者,如果您是CSS新手,我会推荐Udacity这个免费课程,其中包含大量视频教程,并指导您完成HTML& CSS web开发。