html – 在悬停时展开背景

概述我有一个带有背景图像的div,我想要做的是,当我将鼠标悬停在它上面时,背景图像的隐藏部分将显示如下例所示： 我的jsfiddle例子： div.test { background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg); background-size: 我有一个带有背景图像的div,我想要做的是,当我将鼠标悬停在它上面时,背景图像的隐藏部分将显示如下例所示：

我的Jsfiddle例子：

div.test {  background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);    background-size: cover;    wIDth: 70px;    height: 70px;    background-position: center;    border-radius: 100%;    display: inline-block;    Transition: all 1s;    position: absolute;    top: 100px;}.test:hover{  transform: scale(1.2);}body {    text-align: center;}

<div ></div>

正如您所看到的,在我的示例中,图像变得越来越大,而我想要显示另外20px的图像(不会影响边界半径).

解决方法 一个HTML元素的示例：

div.test {    background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;    background-size: 140px;    wIDth: 70px;    height: 70px;    background-position: center;    border-radius: 100%;    display: inline-block;    Transition: all 1s;    position: absolute;    top: 100px;    transform-origin: center center;}.test:hover{    wIDth: 90px;    height: 90px;    margin-left: -10px;    margin-top: -10px;}body {    text-align: center;}

<div ></div>

clip-path和shape-inside的示例：

div.test {    background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;    background-size: cover;    shape-insIDe: circle(30% at 50% 50%);    clip-path: circle(30% at 50% 50%);    -webkit-clip-path: circle(30% at 50% 50%);    wIDth: 70px;    height: 70px;    background-position: center;    display: inline-block;    Transition: all 1s;    position: absolute;    top: 100px;    transform-origin: center center;}.test:hover{    shape-insIDe: circle(50% at 50% 50%);    clip-path: circle(50% at 50% 50%);    -webkit-clip-path: circle(50% at 50% 50%);}body {    text-align: center;}

<div ></div>

总结

以上是内存溢出为你收集整理的html – 在悬停时展开背景全部内容，希望文章能够帮你解决html – 在悬停时展开背景所遇到的程序开发问题。

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