时间戳

首页 > 解决方案 > 带有 CSS 过渡的背景缩放不起作用

html - 带有 CSS 过渡的背景缩放不起作用

问题描述


我正在尝试添加一个 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

标签： htmlcsscss-transitions

解决方案

您必须在一个 CSS 声明中添加背景图片。因此，无需在 inline 语句中添加背景图像，添加如下。

#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>

这对我来说很好。:)

推荐阅读