Question

您好，

我有这个CSS代码：

.point1 {background:url(../images/top/pointback.png) no-repeat 0 110px / 100% 35%,url(../images/top/point1back.jpg) no-repeat 0 0 / 100%;}
.point2 {background:url(../images/top/pointback.png) no-repeat 0 110px / 100% 35%,url(../images/top/point2back.jpg) no-repeat 0 0 / 100%;}
.point3 {background:url(../images/top/pointback.png) no-repeat 0 110px / 100% 35%,url(../images/top/point3back.jpg) no-repeat 0 0 / 100%;}
.point4 {background:url(../images/top/pointback.png) no-repeat 0 110px / 100% 35%,url(../images/top/point4back.jpg) no-repeat 0 0 / 100%;}

如您所见，除了针对每种情况而改变的第二背景图像之外，所有4个规则几乎相同。我想知道是否有可能简化这一点，所以我可以用一个规则来声明所有内容。像这样：

.point1, point2, point3, point4 {background:url(../images/top/pointback.png) no-repeat 0 110px / 100% 35%}

.point1 {url(../images/top/point1back.jpg) no-repeat 0 0 / 100%;}
.point2 {url(../images/top/point2back.jpg) no-repeat 0 0 / 100%;}
.point3 {url(../images/top/point3back.jpg) no-repeat 0 0 / 100%;}
.point4 {url(../images/top/point4back.jpg) no-repeat 0 0 / 100%;}

谢谢。

Answer 1

它可以完成，但它可能不是您正在寻找的完全简洁解决方案

您可以将属性声明为与第一个声明完全相同，然后覆盖要在每个类中使用的特定background-image属性/值。

不幸的是，没有办法为第二个背景图像执行或将其合并为一个属性。

.point1,
.point2,
.point3,
.point4{
  background: url(../images/top/pointback.png) no-repeat 0 110px / 100% 35%, url(../images/top/point1back.jpg) no-repeat 0 0 / 100%;
}

.point2 {
  background-image: url(../images/top/pointback.png), url(../images/top/point2back.jpg);
}

.point3 {
  background-image: url(../images/top/pointback.png), url(../images/top/point3back.jpg);
}

.point4 {
  background-image: url(../images/top/pointback.png), url(../images/top/point4back.jpg);
}

如何缩写多个背景css规则？

1 个答案: