背景位置异常

Question

这 CSS 定位精灵，使精灵的左上角出现在 50% 的中心位置；

.al-for-you h2::after, .taster-cta h2::after {
    background: url("images/kick-30.png") no-repeat scroll 50% -32px;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    top: 100%;
    width: 100%;
}

改成这个；

background: url("images/kick-30.png") no-repeat scroll 50% 0;

正确定位（其他）精灵，即它在其容器内居中。但是这个；

background: url("images/kick-30.png") no-repeat scroll 50% 100%;

与第一个示例具有相同的偏移量。

是不是我无法将精灵与背景百分比居中，而不得不使用单独的图像？还是我遗漏了什么？

Firebug 在这里没有帮助 - 我认为将滚动更改为固定会是答案，但背景只是消失了，不知道它去了哪里。

页面上可以看到http://development.actionlearningassociates.co.uk/action-learning-2

Answer 1

可以这样写，

.al-for-you h2::after, .taster-cta h2::after {
    background: url("images/kick-30.png") no-repeat scroll;
    background-position-x:  /*applicable value*/;
    background-position-y:  /*applicable value*/;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    top: 100%;
    width: 100%;
}

希望它对你有用...

祝你好运['}

Answer 2

h2::after 元素（但不是锚点）的错位问题是因为 h2::after 元素从哪里开始。它从 10px 的偏移量开始，因为在其父级上设置了 padding。由于此偏移，图像看起来好像不在中心，即使它实际上是在中心。我在下面的代码片段中添加了一个红色边框，以便您直观地看到它。

.al-for-you {
  background: #bbccba none repeat scroll 0 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.al-for-you h2 {
  background: #11696a none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 32px;
  margin-bottom: 30px !important;
  padding: 9px 10px !important;
  position: relative;
}
.al-for-you h2::after {
  background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  top: 100%;
  width: 100%;
  border: 1px solid red;
}
.al-for-you .cta {
  background: #106a6a url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% 0;
  color: #fff;
  display: block;
  padding: 40px 20px;
  text-align: center;
  border: 1px solid red;
}

<div class="al-for-you">
  <div class="thumbnail-container">
    <h2>Is action learning for you?</h2>
    <p>
      <p>If you’re ready for change, if you feel stuck right now, or are perhaps facing resistance within your organisation, Action Learning will help.</p>
      <p>You will be able to share your experiences with a small group of peers in our Action Learning Sets, and take away actions you can implement straight away.</p>
      <a class="cta" href="/contact"> Get in touch... </a>
  </div>

解决这个问题的方法有以下三种：

通过删除父级上的 padding。但是我不认为这对你来说是个好选择因为它会影响文本的定位等

或者，您可以将 h2::after 元素的 width 设置为 100% - 20px（20px，因为两边都有 10px 的填充）。这可以使用下面代码段中的 calc 功能来完成。

.al-for-you h2::after {
  background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  top: 100%;
  width: calc(100% - 20px); /* modified width setting */
}

.al-for-you {
  background: #bbccba none repeat scroll 0 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.al-for-you h2 {
  background: #11696a none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 32px;
  margin-bottom: 30px !important;
  padding: 9px 10px !important;
  position: relative;
}
.al-for-you h2::after {
  background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  top: 100%;
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
}
.al-for-you .cta {
  background: #106a6a url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% 0;
  color: #fff;
  display: block;
  padding: 40px 20px;
  text-align: center;
}

<div class="al-for-you">
  <div class="thumbnail-container">
    <h2>Is action learning for you?</h2>
    <p>
      <p>If you’re ready for change, if you feel stuck right now, or are perhaps facing resistance within your organisation, Action Learning will help.</p>
      <p>You will be able to share your experiences with a small group of peers in our Action Learning Sets, and take away actions you can implement straight away.</p>
      <a class="cta" href="/contact"> Get in touch... </a>
  </div>

或者，由于您已经对 h2::after 元素使用了绝对定位，因此您可以将左侧位置设置为 0px，并将宽度保留为 100%，如下面的代码片段所示。

.al-for-you h2::after {
  background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  left: 0px; /* add this */
  top: 100%;
  width: 100%;
}

.al-for-you {
  background: #bbccba none repeat scroll 0 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.al-for-you h2 {
  background: #11696a none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 32px;
  margin-bottom: 30px !important;
  padding: 9px 10px !important;
  position: relative;
}
.al-for-you h2::after {
  background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
}
.al-for-you .cta {
  background: #106a6a url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% 0;
  color: #fff;
  display: block;
  padding: 40px 20px;
  text-align: center;
}

<div class="al-for-you">
  <div class="thumbnail-container">
    <h2>Is action learning for you?</h2>
    <p>
      <p>If you’re ready for change, if you feel stuck right now, or are perhaps facing resistance within your organisation, Action Learning will help.</p>
      <p>You will be able to share your experiences with a small group of peers in our Action Learning Sets, and take away actions you can implement straight away.</p>
      <a class="cta" href="/contact"> Get in touch... </a>
  </div>

背景位置异常

Background-position anomolies

css

pseudo-class

background-position