Question

我试图添加一个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;
}

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

Answer 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%;  
}

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

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

这对我来说很好。：）

Answer 4

您没有在代码的任何地方定义过渡。只有过渡延迟。

除此之外，您的内联样式将覆盖悬停状态中定义的样式。将内联样式移动到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

Answer 5

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

先设置transition: ease-in-out，然后再设置transition-delay可以使效果轻松自如，但会增加2秒钟的延迟。您发布的示例链接显示如下-https://codepen.io/mrsalami/pen/EpLZMe

Answer 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 总是一种不好的做法，如果您必须使用它，那您可能在这里做错了。

css过渡的背景缩放不起作用

6 个答案: