带有 CSS 过渡的背景缩放不起作用答案

【问题标题】：background zoom with css transitions not working带有 CSS 过渡的背景缩放不起作用
【发布时间】：2019-01-10 06:27:09
【问题描述】：

我正在尝试添加一个 CSS 过渡，因此当用户将鼠标悬停在 div 上时，背景会像 https://codepen.io/mrsalami/pen/EpLZMe 一样放大。但是，转换延迟不起作用。

我的 HTML：

<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center no-repeat;">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

我的 CSS：

#home-block {
  width: 100%;
  transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  height: calc((100vh - 133px)/ 3);
  -webkit-background-size: 100%;
  background-size: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home-block:hover {
  background-size: 150% !important;
}
#home-block .home-box-text {
  margin: 0;
}
#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}

我的问题的codepen是https://codepen.io/mrsalami/pen/WKJRjr

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

您可以像这样在 css 中将图像更改为身体的背景图像：

#home-block {
    background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat;
    width: 100%;
    height: 200px;
    color:#86A3B1;
    background-size: 100%;
    transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
}

#home-block:hover {
    background-size: 150%;  
}

【讨论】：

【解决方案2】：

#home-block {
  width: 100%;
  height:150px;
  background: url("http://www.intrawallpaper.com/static/images/1968081.jpg") center center no-repeat;
  transition: all 2s ease;
  // height: calc((100vh - 133px)/ 3);
  background-size: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-block:hover {
  background-size: 150%;
}

#home-block .home-box-text {
  margin: 0;
}

#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}

<div class="what-we-do" id="home-block" style="">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

【讨论】：

【解决方案3】：

您必须在一个 css 声明中添加背景图片。因此，在内联语句中不添加背景图片，添加如下。

#home-block {
    background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center no-repeat;
    width: 100%;
    height: 200px;
    color:#86A3B1;
    background-size: 100%;
    transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

#home-block:hover {
      background-size: 150%;
}

和 HTML 部分一样。

<body>
<div class="what-we-do" id="home-block">
  <div class="home-box-text">
    <h1>What We Do</h1>
</div>

这对我来说很好。 :)

【讨论】：

【解决方案4】：

请务必注意，除了在 CSS 中设置背景图像外，您还必须使用 transition: ease-in-out 而不是 transition-delay，因为您实际上还没有设置过渡。

设置transition: ease-in-out，然后设置transition-delayafterwards 会给你一个缓进的效果，但它会在它开始之前增加2秒的延迟。您作为示例发布的链接显示了这一点 - https://codepen.io/mrsalami/pen/EpLZMe

【讨论】：

【解决方案5】：

您没有在代码中的任何位置定义转换。只是过渡延迟。

除此之外，您的内联样式会覆盖在悬停状态中定义的样式。将内联样式移至 CSS。

此外，您应该始终在前缀版本之后定义非前缀属性。这个很重要。如果您的顺序不正确，浏览器可能会使用实验性前缀实现而不是符合标准的非前缀版本。

CodePen

#home-block {
  width: 100%;

  background: url("http://www.intrawallpaper.com/static/images/1968081.jpg") center center no-repeat;
  background-size: 100%;
  transition: all 1s ease;
  transition-delay: 1s;

  height: calc((100vh - 133px)/ 3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-block:hover {
  background-size: 150%;
}

#home-block .home-box-text {
  margin: 0;
}

#home-block .home-box-text h1 {
  font-size: 30px;
  text-transform: uppercase;
}

#scroll-body {
  padding-left: 35px;
}

<div class="what-we-do" id="home-block" style="">
  <div class="home-box-text">
    <h1>What We Do</h1>
  </div>
</div>

如果由于某种原因您需要保留内联样式，那么您可以在声明中包含背景大小...

<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center / 100% no-repeat; ">

CodePen

或者在你的默认状态 CSS 中使用 !important...

background-size: 100% !important;

CodePen

【讨论】：

【解决方案6】：

如上所述，您正在覆盖您的内联样式。如果您确实必须具有内联图像的 URL，请尝试像这样分隔所有背景属性：

HTML：

<div class="what-we-do" id="home-block" style="background-image: url('http://www.intrawallpaper.com/static/images/1968081.jpg');">
    <div class="home-box-text">
        <h1>What We Do</h1>
    </div>
</div>

CSS：

#home-block {
    transition: all 2s ease;
    background-size: 100%;
    background-position: center center;
    background-repeat:  no-repeat;
    ...
}

Codepen：https://codepen.io/anon/pen/WKJjMW

请记住，在 CSS 中使用 !important 始终是一种不好的做法，如果您必须使用它，那么您可能在那里做错了。

【讨论】：