栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在具有background-size的div上缩放背景图像

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在具有background-size的div上缩放背景图像

对于那些想要破解CSS过渡缩放以应用于背景尺寸的人的答案:

-否则,请阅读第二部分以了解达到这种效果的标准方法

<div >    <div></div>    <p>hello</p></div>html, body {    height: 100%;}div.wrap {    height: 33%;    width: 33%;    overflow: hidden;    position: relative;}div.wrap > div {    position: absolute;    height: 100%;    width: 100%;    -moz-transition: all .5s;    -webkit-transition: all .5s;    transition: all .5s;    -moz-transform: scale(1,1);    -webkit-transform: scale(1,1);    transform: scale(1,1);    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');    -moz-background-size: cover;    -webkit-background-size: cover;    background-size: cover;    z-index: -1;}div.wrap:hover > div {    -moz-transform: scale(2,2);    -webkit-transform: scale(2,2);    transform: scale(2,2);    }

演示 (使用

background-size: cover;
过渡/缩放元素)

至于你说的是转变的

cover
大小是必要的,所以我来了,我告诉你之前,我在这里有下嵌套子元素的伎俩
position:relative;
在那里我有子元素设置为元素
position: absolute;
background-image
具有
background-size
设置为
cover
,然后
hover
父,我使用
transform: scale(2,2);
属性将元素放大。

另外,使用此解决方案时,至关重要的一点是,我们需要

z-index
position:absolute;
元素的设置为低于要放入其中的元素,因此它的作用就像
background


回答那些想要使用HTML和CSS的人

你不能动画显示

background-size
,如果它的价值是
cover
这样无论是你需要
px
或者
%
,或者你也可以使用一个
img
标签与
transform:scale(2,2);
属性。

演示2(从中心放大或缩小)

div {    height: 200px;    width: 200px;    background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');    background-size: 100% 100%;    -moz-transition: all .5s;    -webkit-transition: all .5s;    transition: all .5s;}div:hover {    background-size: 150% 150%;}

如果要坚持下去,

background-size: cover;
则必须将整个元素包装在具有固定尺寸的wrapper元素内,
overflow:hidden;
然后再缩放
hover
父元素的子元素。


正如您所评论的那样,对于

img
标记示例,可以使用
transform: scale(2,2);
将其父元素设置为
overflow: hidden;

div {    height:300px;    width: 300px;    overflow: hidden;}div img {    -moz-transition: all .5s;    -webkit-transition: all .5s;    transition: all .5s;    -moz-transform: scale(1,1);    -webkit-transform: scale(1,1);    transform: scale(1,1);}div:hover img {    -moz-transform: scale(2,2);    -webkit-transform: scale(2,2);    transform: scale(2,2);}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/470663.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号