我有一系列背景图像的div.大小设置为background-size:cover.
但我希望能够让图像放大并在悬停时增长.此转换不适用于看起来的封面属性.实际上,图像放大但没有过渡效果.它立即从“覆盖”到,在这种情况下,110%.当原始背景大小设置为100%时,它工作正常.
但有了这个,在调整页面大小时,图像似乎有点落后于div,这不是我想要的.封面始终保持中心,我想要的.
任何有关如何进行转换的建议,因为它会以覆盖或相同的效果增长.
Ilmiont
解决方法
更多信息: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 class="wrapper"> <div class="image"></div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。