CSS 给Chrome中的一个DIV添加css3旋转，然后使用background-attachment:fixed创建一个错误

在本文中，我们将介绍如何给Chrome中的一个DIV添加css3旋转，并且使用background-attachment:fixed创建一个错误。首先，我们将学习如何给DIV元素添加旋转效果。

阅读更多：CSS 教程

添加旋转效果

通过使用CSS3的transform属性，我们可以给一个元素添加旋转效果。在本例中，我们将以一个DIV元素为例来展示如何实现旋转效果。

<div class="rotate-div">Hello, CSS</div>

.rotate-div {
  transform: rotate(30deg);
}

在上述代码中，我们给DIV元素添加了一个名为”rotate-div”的类，并在CSS中将其旋转了30度。这样，DIV元素就会以顺时针方向旋转30度。

background-attachment:fixed创建错误

接下来，我们将介绍如何使用background-attachment:fixed属性来创建一个错误。这个属性通常用来控制背景图像的滚动效果。当我们将其应用于一个旋转过的DIV元素时，会导致背景图像错位的问题。

.rotate-div {
  transform: rotate(30deg);
  background-image: url("background.jpg");
  background-attachment: fixed;
}

上述代码中，我们仍然是给DIV元素添加了一个旋转效果，同时设置了一个背景图像和background-attachment:fixed属性。然而，在Chrome浏览器中，当我们滚动屏幕时，背景图像会出现错位的情况。

解决错误

要解决这个问题，我们可以使用一个小技巧，将背景图像作为另一个元素的背景，而不是作为DIV元素自身的背景。

<div class="rotate-div">
  <div class="background-image"></div>
  Hello, CSS
</div>

.rotate-div {
  position: relative;
  transform: rotate(30deg);
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  background-attachment: fixed;
  opacity: 0.5;
}

在上述代码中，我们在DIV元素内部添加了一个名为”background-image”的子元素，并将背景图像设置为该子元素的背景。还设置了其position属性为absolute，width和height为100%，使其充满整个DIV元素。

这样，当我们给DIV元素添加旋转效果时，背景图像就不会和元素一起旋转，而是保持固定位置，不会出现错位的问题。