Question

我无法理解背景属性。

 .stars div a {
      background: transparent url(sprite_rate.png) 0 0 no-repeat;
      display: inline-block;
      height: 23px;
      width: 12px;
      text-indent: -999em;
      overflow: hidden;
    }

Answer 1

background:

transparent 希望很清楚：）

url(sprite_rate.png)背景图片

0 0容器中的位置 - 左上角

no-repeat背景图片不应重复

display: inline-block;

表示内联元素的框，请参阅http://www.w3schools.com/css/pr_class_display.asp

height: 23px;
width: 12px;

元素的大小

text-indent: -999em;

将元素踢远远超出可见区域http://www.w3schools.com/css/pr_text_text-indent.asp

overflow: hidden;

隐藏不适合元素http://www.w3schools.com/css/pr_pos_overflow.asp

的内容

Answer 2

background CSS速记属性的语法是：

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

它将大量背景属性组合到一个简写属性中。见：

http://reference.sitepoint.com/css/background了解更多信息。

您正在查看的技术称为 CSS Sprites 。您可以在此处找到有关它的更多信息：

http://www.alistapart.com/articles/sprites

Answer 3

CSS background属性是以下属性的简写属性： CSS背景属性的属性值的顺序是：

background-color
background-image
background-repeat
background-attachment
background-position

如果其中一个属性值丢失，则无关紧要，只要存在的属性值按此顺序排列。

在您的情况下，您正在执行以下操作：

background: transparent url(sprite_rate.png) 0 0 no-repeat;

<强>透明

这意味着背景颜色是透明的

<强> URL（sprite_rate.png）

背景图片的网址是sprite_rate.png。

0 0

左侧和上方位置为0px。

否重复

最后一个参数是no-repeat，这意味着图像不会在x轴和y轴上重复。

以下是按正确顺序排列所有属性的链接：

http://www.w3schools.com/css/pr_background-color.asp

http://www.w3schools.com/css/pr_background-image.asp

http://www.w3schools.com/css/pr_background-position.asp

http://www.w3schools.com/css/pr_background-repeat.asp

您可以在以下位置了解有关背景速记属性的更多信息： http://www.w3schools.com/css/css_background.asp

Answer 4

在透明背景上绘制sprite_rate.png的左上角，而不重复（平铺）图像。它将以内联方式显示（在文本之间），但作为一个块，宽12像素，高23像素。第一行文本将向左缩进，很可能不会显示任何文本，特别是因为溢出将被隐藏（12x23矩形之外的任何内容都不会被渲染）。

所有这一切都可以用谷歌搜索。

任何人都可以解释以下代码吗？

4 个答案: