Html &引用；变换：旋转-为什么我的背景图像也随着文本的旋转而移动？

我试图在背景图像上旋转文本，但我的背景图像也随着文本旋转而移动。为什么？在这里你可以看到我的作品

这里有HTML代码

<ul>

<li>
  <img src="http://lorempixum.com/200/200/food" />
  <h2>price is $20 only</h2>
  <span class="twenty-percent rotate"/>20% </span>
</li>

</ul>

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

li{position:relative;float:left;margin:15px;background:yellow;display:inline}

.twenty-percent{
background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png);position:absolute; right:-15px; top:-5px; width:45px; height:45px}

您也可以在这里看到JSFIDLE中的完整示例

---

CSS

transform

应用于元素，而不仅仅是元素的内容。因此，你旋转的背景

如果要在不旋转背景的情况下旋转文本，请在元素中添加一个额外的

，并将文本+转换CSS放置在该元素中

建议更新：

<span class="twenty-percent">
    <div class="rotate"></div>
    20%
</span>

20%

CSS

transform

应用于元素，而不仅仅应用于元素的内容。因此，你旋转的背景

如果要在不旋转背景的情况下旋转文本，请在元素中添加一个额外的

，并将文本+转换CSS放置在该元素中

建议更新：

<span class="twenty-percent">
    <div class="rotate"></div>
    20%
</span>

20%

旋转span标签，该标签也保存背景图像

<span class="twenty-percent rotate"/>

旋转-旋转跨度（其中的所有内容）

---

百分之二十-这也保存了您的背景图像。

您旋转的span标记也保存了您的背景图像

<span class="twenty-percent rotate"/>

旋转-旋转跨度（其中的所有内容）

---

百分之二十-这也保存着你的背景图像。

你有两个类，但它们是相同的元素，因此当你旋转你的.rotate类时，你也在旋转该类。百分之二十，因为它们是相同的元素。

你有两个类，但它们是相同的元素，所以当你旋转.rotate类时，你也在旋转旋转类。20%，因为它们是相同的元素。

我建议将20%包装在另一个span

20%

中，并将类

交给它。相反，将其旋转

<span class="twenty-percent rotate"/>

<span class="twenty-percent"/><span class="rotate">20%</span></span>

20%
我建议将20%包装在另一个span
20%
中，并将类
交给它。将其旋转

<span class="twenty-percent"/><span class="rotate">20%</span></span>

20%
尝试用另一个span包装您span，将背景图像放在外部，将文本放在内部。尝试用另一个span包装您span，将背景图像放在外部，将文本放在内部。我确信我的代码是正确的。您的代码是错误的：
…
。
/
不应该在那里。我确信我的代码是正确的。您的代码错误：
…
。
/
不应该在那里。