html – background-transition with background-size：cover

概述这可能已经在某个地方得到了解答,但我在搜索之后还没有找到. 我有一系列背景图像的div.大小设置为background-size：cover. 但我希望能够让图像放大并在悬停时增长.此转换不适用于看起来的封面属性.实际上,图像放大但没有过渡效果.它立即从“覆盖”到,在这种情况下,110％.当原始背景大小设置为100％时,它工作正常. 但有了这个,在调整页面大小时,图像似乎有点落后于div,这不是我 这可能已经在某个地方得到了解答,但我在搜索之后还没有找到.

我有一系列背景图像的div.大小设置为background-size：cover.

但我希望能够让图像放大并在悬停时增长.此转换不适用于看起来的封面属性.实际上,图像放大但没有过渡效果.它立即从“覆盖”到,在这种情况下,110％.当原始背景大小设置为100％时,它工作正常.

但有了这个,在调整页面大小时,图像似乎有点落后于div,这不是我想要的.封面始终保持中心,我想要的.

任何有关如何进行转换的建议,因为它会以覆盖或相同的效果增长.

Ilmiont

解决方法 在为背景大小使用CSS动画时,不能使用关键字(例如封面).

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

相关文字：

background-size – yes,as a repeatable List of a simple List of a
length,percentage or calc(); when both values are lengths,they are
interpolated as lengths; when both values are percentages,they are
interpolated as percentages; otherwise,both values are converted into
a calc() function that is the sum of a length and a percentage (each
possibly zero),and these calc() functions have each half interpolated
as real numbers. . This means keyword values are not animatable.

获得此效果的一种方法是将具有背景图像的元素放置在隐藏溢出的包裹元素中并应用缩放变换.

.wrapper {   wIDth:300px;  height:400px;  overflow:hidden;}.image {  background:url("http://placekitten.com/g/500/500");  background-size:cover;  wIDth:100%;  height:100%;  Transition: transform 2s;}.image:hover { transform:scale(1.1) }

<div >  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – background-transition with background-size：cover全部内容，希望文章能够帮你解决html – background-transition with background-size：cover所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。