在 CSS 中使用 1 url 设置图像精灵

Question

我想做的是在 CSS.

中只使用一张图片 url

所以我只需要更改 CSS 中的 1 url，如果我更改图像或其他内容，则不需要更改所有这些。

代码已经在使用图像精灵。我只希望它在其中使用 1 张图像 url，而不是 6.

如何做到这一点？

这是所有图像 url 和背景位置所在的位置：

.jacketc {
  position: relative;
  width: 606px;
  height: 344px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -862px;
}

.jacketd,
.wraph {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat 0 0;
}

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  background-position: 0 -600px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px 0;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background-position: -600px -260px;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

.wrapd .img {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 180px;
  height: 180px;
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -860px -340px;
}

.jacketb,
.wrape {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -520px;

}

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  overflow: hidden;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: -600px -687px;
}

.wrapf {
  position: relative;
  width: 266px;
  height: 251px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background: #000000 url("https://i.imgur.com/Y0CrMX2.png") -866px -616px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

Answer 1

参见fiddle中的CSS：https://jsfiddle.net/ksp4qoej/

注意最相关的变化：

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img
.wrape,
.wraph,
.wrapf {
  background-image: url("https://i.imgur.com/Y0CrMX2.png");
  background-repeat: no-repeat;
}

我们在这里所做的是将图像作为背景应用到具有单个规则的多个类元素。 background-position 值需要更精细地更新，这是在文件其他地方的各个选择器块中完成的。

准备就绪后，使用 SASS 或 LESS 之类的东西生成 CSS 可以为图像映射提供更清晰的代码。看看这个！ http://thesassway.com/intermediate/spriting-with-sass-and-compass

Answer 2

David M 的解决方案是正确的。我能看到的唯一问题是 .wrapd .img 后缺少逗号（见下文）

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}

在 CSS 中使用 1 url 设置图像精灵

Setting up image sprites using 1 url in the CSS

css

image

css-sprites

sprite