Question

我的html和CSS有一个特定的问题。我有一个带有封面背景的标题，并且此标题内有几个框。我想用标题背景图像的样式化部分添加悬停效果。这很简单，直到我想要在每个RWD断点上准确定位此悬停的位置为止（我认为这是不可能的，但是我必须尝试）。标题背景和框悬停背景彼此独立。

我有一个简单的标记和CSS。我是否必须使用JS / jQuery将标头背景属性复制到悬停的框？我不知道。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.header {
  background: url(https://i.stack.imgur.com/tQBaA.jpg) no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.wrapper {
  width: 1200px;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.box {
  flex: 1;
}

.box:hover {
  background: url(https://i.stack.imgur.com/VyLFe.jpg) no-repeat;
}

<div class="header">
  <div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
  </div>
</div>

请。请参阅整页以更好地了解。任何解释此问题的链接/网站都表示赞赏。

Answer 1

我只能猜测，但是我认为可以用mix-blend-mode来达到您想要的效果：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.header {
  background: url(https://i.stack.imgur.com/tQBaA.jpg) no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.wrapper {
  width: 1200px;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.box {
  flex: 1;
}

.box:hover {
  background: url(https://i.stack.imgur.com/VyLFe.jpg) no-repeat;
  mix-blend-mode: screen;
}

<div class="header">
  <div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
  </div>
</div>

Answer 2

我认为您可以将标题图片划分为单独的框，即box1-box4。

我更新了您的代码，看看这是否是您想要的结果。请注意，我将悬停的图像更改为灰度以加快工作速度，您可以轻松地将其更改为每个元素的背景图像。

See here for the result。

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.header {
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.wrapper {
  width: 1200px;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.box {
  flex: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.box1 {
  background-image: url(https://i.imgur.com/K0a4IMX.jpg);
}

.box2 {
  background-image: url(https://i.imgur.com/nJ959iP.jpg);
}

.box3 {
  background-image: url(https://i.imgur.com/96SG6Zx.jpg);
}

.box4 {
  background-image: url(https://i.imgur.com/ulhn4Db.jpg);
}

.box:hover {
  filter: grayscale(100);
}

See here for the result。

精确适合容器的独立背景

2 个答案:

CSS