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

<div class="atcui-text atcui-align-right">SAVED DOCUMENTS</div>元素（但不是锚点）的错位问题是因为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元素的width设置为h2::after（20px，因为任意一侧有10px填充）。这可以使用100% - 20px功能完成，如下面的代码段所示。

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>元素的绝对定位，您可以将左侧位置设置为0px，并将宽度保留为100％，如下面的代码段所示。

h2::after

.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;
}

Answer 2

你可以这样写，

.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%;
}

希望它对你有用......

祝你好运['}

背景位置的异常

2 个答案: