Question

我正在使用这样的div来处理“缩放”效果：

<div class="highlight" style="background-image:url(image); background-position: 65% 50%;">
            <div class="content" style="margin-top: 150px">
                <h3>Blabla<br>Blablablablabla<br></h3>
                <p class="home5050">Blablablablabla.</p>
                <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a>
            </div>
        </div>

这样的CSS：

    .highlight {
  display: block;
  position: relative;
  /*min-height: 800px;*/
  min-height: 520px;
  background-position: center center;
  background-repeat: no-repeat;
  /*padding-top: 200px;*/
  padding-top: 80px;
  /*background-size: cover;*/
}

.highlight:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.25);
    content: "";
}

.highlight{
  position: relative;
  height: 800px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:hover{
  background-size: auto 130%;
  background-color:rgba(0,0,0,0.4);
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}

.highlight:before{
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
  background-color:rgba(0,0,0,0.4);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

.highlight:hover:before{
 background-color:rgba(0,0,0,0.8);
 -moz-transition: background-color 3s ease;
 -webkit-transition: background-color 3s ease;
 transition: background-color 3s ease; 
}

我发现主题中有更多css引用突出显示，可能是它的一些问题？这在firefox中工作，但现在不在chrome中。

https://jsfiddle.net/1v3epk6b/2/

Answer 1

您在3个地方指定了procedure TForm3.ListView1ButtonClick(const Sender: TObject; const AItem: TListViewItem; const AObject: TListItemSimpleControl); begin Memo1.Lines.Add('ListView1ButtonClick: '+IntToStr(AItem.Index)); end; procedure TForm3.ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem); begin Memo1.Lines.Add('ListView1ItemClick: '+IntToStr(AItem.Index)) end;，但其中只有2个进行了转换。合并background-size的规则并删除第三个.highlight。

我不知道你真正想要的规则，但也许是这样：

background-size

https://jsfiddle.net/xav8t479/2/

如果您想在3秒后开始转换，则需要使用.highlight:hover { background-size: auto 130%; background-color: rgba(0,0,0,0.4); -moz-transition: background-size 3s ease; -webkit-transition: background-size 3s ease; transition: background-size 3s ease; } .highlight { display: block; position: relative; min-height: 520px; height: 800px; cursor: pointer; background-size: auto 110%; background-repeat: no-repeat; background-position: center center; padding-top: 80px; -moz-transition: background-size 3s ease; -webkit-transition: background-size 3s ease; transition: background-size 3s ease; }属性：

transition-delay

https://jsfiddle.net/xav8t479/3/

Answer 2

这是一个没有动画关键帧的版本：
你在寻找这个吗？它在Chrome中工作。

＆＃13;

.highlight:hover {
  background-color: rgba(0,0,0,0.4);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2 ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-size: auto 130%;
}
.highlight {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2 ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg);
  position: relative;
  height: 800px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  min-height: 520px;
  padding-top: 80px;
}

＆＃13;

<div class="highlight">
  <div class="content" style="margin-top: 150px">
    <h3>Blabla<br>Blablablablabla<br></h3>
    <p class="home5050">Blablablablabla.</p>
    <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a>
  </div>
</div>

＆＃13;

使用css3过渡使背景图像变焦，而不是在chrome中工作

2 个答案: