Question

样本div徘徊不错但背景图像不移动。 div徘徊不错，但背景中的图像保持在同一位置。我想要实现的是当你将鼠标悬停在div上时它会像点击一样移动，但div中的背景图像似乎根本没有移动。我希望div和背景像真正的按钮点击一样移动。小提琴链接：http://jsfiddle.net/jackJoe/YhDXm/。

.sample {
  width: 220px;
  height: 220px;
  position: absolute;
  overflow: hidden;
  margin: 180px;
  border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: url(http://static.adzerk.net/Advertisers/2362.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 188px 188px;
}
.sample > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}
.sample > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 200%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.sample > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
  margin: 0;
  color: white;
  position: relative;
  z-index: 0;
}
.sample:hover {
  background-color: #f0eade;
  box-shadow: 1px 1px 5px #363024;
  -webkit-box-shadow: 1px 1px 5px #363024;
  -moz-box-shadow: 1px 1px 5px #363024;
  position: relative;
  top: 10px;
  margin: 180px;
}

<div class="sample">
  <header>
    <p><a>
          Skyscraper
        </a>
    </p>
  </header>
</div>

Answer 1

您的背景图片保持不动，因为您已启用background-attachment: fixed;。

background-attachment: fixed

上的

From MDN

此关键字表示背景是针对视口修复的。即使元素具有滚动机制，“固定”背景也不随元素移动。

完全删除background-attachment语句并将background-position更改为0 0（或左上角），然后您需要相应地修改子元素。

<强> Fiddle here with adjustments made.

现在我已经完成了这个，一些补充建议：

你应该肯定不会这样做使用top或任何其他位置属性。这些将导致布局重新计算每个单独的悬停事件（即使使用position: absolute;）和涂料，至少。如果您在该页面上有很多内容，您的用户可能会对页面上的口吃感到沮丧或不满。

相反，使用transform: translate(X, Y);进行非常便宜且同样有效的举动。 Here is the fiddle已合并

Answer 2

我找到了问题的答案，感谢大家的帮助，这是小提琴：http://jsfiddle.net/YhDXm/1186/

.sample {
  width: 220px;
  height: 220px;
  position: absolute;
  overflow: hidden;
  margin: 180px;
  border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: url(http://static.adzerk.net/Advertisers/2362.jpg);
  background-repeat: no-repeat;  
  background-position: 0 0;
}
.sample > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}
.sample > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;

  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.sample > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
  margin: 0;
  color: white;
  position: relative;
  z-index: 0;
}
.sample:hover {
  box-shadow: 1px 1px 5px #363024;
  -webkit-box-shadow: 1px 1px 5px #363024;
  -moz-box-shadow: 1px 1px 5px #363024;
  position: relative;
  top: 10px;
  margin: 180px;
}
<div class="sample">
  <header>
    <p><a>
          Skyscraper
        </a>
    </p>
  </header>
</div>

将鼠标悬停在图像上时，我无法实现点击效果

2 个答案: