那些遇到过的问题

透明图像上的CSS转换

Wha*_*ber 26 html javascript css jquery

我有三张图片(透明png)

图片1

图2

图3

使用以下html/css堆叠

<div style="position: relative; left: 0; top: 0;">
    <img src="img/main.png" style="position: absolute; top: 0; left: 0;" />
    <img src="img/middle.png" style="position: absolute; top: 0; left: 0;"/>
    <img src="img/center.png" style="position: absolute; top: 0; left: 0;"/>
</div>
Run Code Online (Sandbox Code Playgroud)

得到这个:

图4

我想在每个图像上添加悬停效果(放大,边框,不透明度等).

用于放大悬停的普通CSS将是:

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud)

在这种情况下不起作用,因为悬停效果不仅应用于整个图像的图像部分(图像具有透明背景).

我的问题是,是否可以使用不规则形状的CSS设置透明图像的样式？

jsfiddle:http://jsfiddle.net/h4mxysw5/

编辑:

似乎有一种混乱.我不想一次缩放所有三个图像.

例如 - 当悬停在中心图像上时,我只想要缩放中心图像(不是全部).

用边框更新了jsfiddle:http://jsfiddle.net/h4mxysw5/4/

Dav*_*mez 25

你需要做的两件事.

  • 剪裁图像以仅适合它们所需的空间,而不是整个容器尺寸,因此它们不会相互重叠.
  • :hover从中删除div并:hover使用img选择器为每个图像添加行为.

这是一个例子:

div {
    margin: 50px; /* Just for demo purposes */
}

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud) 
<div style="position: relative; left: 0; top: 0;">
    <img class="one" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" />
    <img class="two" src="http://i.imgur.com/iEwbExs.png" style="position: absolute; top: 76px; left: 72px;"/>
    <img class="three" src="http://i.imgur.com/hdwFlUv.png" style="position: absolute; top: 102px; left: 100px;"/>
</div>
Run Code Online (Sandbox Code Playgroud)

更新

检查您可以使用SVG执行的操作:

path {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
    transform-origin: center center;
}

path:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud) 
<svg width="400px" height="400px">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M140.5,178 C161.210678,178 178,161.210678 178,140.5 C178,119.789322 161.210678,103 140.5,103 C119.789322,103 103,119.789322 103,140.5 C103,161.210678 119.789322,178 140.5,178 Z M141,158 C150.388841,158 158,150.388841 158,141 C158,131.611159 150.388841,124 141,124 C131.611159,124 124,131.611159 124,141 C124,150.388841 131.611159,158 141,158 Z" fill="#4BA1DF"></path>
            <path d="M140,205 C175.898509,205 205,175.898509 205,140 C205,104.101491 175.898509,75 140,75 C104.101491,75 75,104.101491 75,140 C75,175.898509 104.101491,205 140,205 Z M140,189 C167.061953,189 189,167.061953 189,140 C189,112.938047 167.061953,91 140,91 C112.938047,91 91,112.938047 91,140 C91,167.061953 112.938047,189 140,189 Z" fill="#4BA1DF"></path>
            <path d="M140,280 C217.319865,280 280,217.319865 280,140 C280,62.680135 217.319865,0 140,0 C62.680135,0 0,62.680135 0,140 C0,217.319865 62.680135,280 140,280 L140,280 Z M140.5,226 C187.720346,226 226,187.720346 226,140.5 C226,93.2796539 187.720346,55 140.5,55 C93.2796539,55 55,93.2796539 55,140.5 C55,187.720346 93.2796539,226 140.5,226 L140.5,226 Z" fill="#4BA1DF"></path>
    </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

  • 捎带这个答案 - 您可以添加边界半径并获得更准确的悬停区域:http://jsfiddle.net/afLmrmmk/4/ (2认同)

wf4*_*wf4 11

这里的主要问题是你使用的所有图像都是相同的大小 - 所以因为它们彼此叠加,你只会在最上面的位置上空盘旋.仅仅因为图像是透明的,它仍会触发:当您将鼠标悬停在图像的任何部分上时将鼠标悬停.为了演示使用您自己的CSS,您可以在没有图像的情况下执行此操作:

div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:10px solid #f00;
border-radius:50%;
position: absolute; 
 }

.outer {
width:200px;
height:200px;
    top: 25px; 
left: 25px;
border:30px solid #f00;
}
.middle {
width:150px;
height:150px;
    top: 60px; 
left: 60px;
border:20px solid #f00;
}
.inner {
width:100px;
height:100px;
top: 95px; 
left: 95px;
border:10px solid #f00;
}

div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
 transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud) 
<div style="position: relative; left: 0; top: 0;">
    <div class="outer"></div><div class="middle"></div><div class="inner"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

在这里,通过一些调整,你可以使用相同的CSS,但也使用图像作为"背景图像"来提供你想要实现的效果.

div > div {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
    border:1px solid #f00;
border-radius:50%;
position: absolute; 
 }

.outer {
    width:280px;
    height:280px;
        top: 25px; 
    left: 25px;
    background-image:url(http://i.stack.imgur.com/bFfbC.png);
}
.middle {
    width:130px;
    height:130px;
        top: 100px; 
    left: 100px;
    background-image:url(http://i.stack.imgur.com/Eewcq.png);
    background-position:center;
}
.inner {
    width:75px;
    height:75px;
    top: 125px; 
    left: 125px;
    background-image:url(http://i.stack.imgur.com/VXk7A.png);
    background-position:center;
}

div > div:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud) 
<div style="position: relative; left: 0; top: 0;">
    <div class="outer"></div>
    <div class="middle"></div>
    <div class="inner"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 如何不在问题中使用图像作为答案.只是关于`border-radius`的评论. (3认同)
  • 在任何情况下,最后一点都是真的.;-) (2认同)

Ren*_*nde 8

出于纯粹的好奇,如果可以做到我只需要创建一个CSS版本.虽然它不使用图像作为所需的OP,但我仍然认为,作为替代img和/或JS结果值得发布.

在代码段中,您将看到无阴影和阴影版本.请不要给你的意见......

(顺便说一下:在FF DE 44+,Chrome 46+和W7上的IE11 +上测试过) 

html, body      { box-sizing: border-box; 
                  height: 100%; width: 100%; background-color: #f9f7f1;
                  margin: 0px; padding: 0px; border: 0px;
                  cursor: default }
*, *:before, 
*:after         { box-sizing: inherit }

.donut-button   { position: relative;
                  width:  280px;
                  height: 280px; 
                  margin: 100px auto;
                  cursor: pointer }

.r-outer        { width: 100%; height: 100%; border-width: 55px; top:  0.0%; left:  0.0% }
.r-middle       { width:  50%; height:  50%; border-width: 15px; top: 25.0%; left: 25.0% }
.r-center       { width:  25%; height:  25%; border-width: 20px; top: 37.5%; left: 37.5% }

.ring           { position: absolute;
                  border-color : hsl(205, 69%, 58%);
                  border-style : solid;
                  border-radius: 50%;
                  transition: all 50ms }

.ring:hover     { transform: scale(1.10) }
.ring:active    { transform: scale(0.95) }


/* demo extras, shadow and color manipulation during hover */
[btn]           { box-shadow: inset    0    0    1px hsla(205, 69%,48%, 1),  /* hide white overflow (quirk) */
                              inset   10px 10px 10px hsla(205, 69%, 8%,.3),  /* inset shadow */
                                       0    0    1px hsla(205, 69%,58%, 1),  /* hide white overflow (ditto) */
                                      20px 20px 10px hsla(205, 69%, 8%,.4),  /* inner outside shadow */
                                       0    0    1px hsla(205, 69%, 8%,.3) } /* outer outside shadow */

[btn]:hover     { border-color: hsl(205, 69%, 62%);
                  box-shadow: inset 10px 10px 10px hsla(205, 69%, 8%,.4),
                                    20px 20px 10px hsla(205, 69%, 8%,.3) }

[btn]:active    { border-color: hsl(205, 69%, 54%);
                  box-shadow: inset  8px  8px  8px hsla(205, 69%, 8%,.5),
                                    10px 10px 10px hsla(205, 69%, 8%,.4) }
Run Code Online (Sandbox Code Playgroud) 
    <div id="donut-1" class="donut-button">
        <div class="ring r-outer"></div>
        <div class="ring r-middle"></div>
        <div class="ring r-center"></div>
    </div>

    <div id="donut-2" class="donut-button">
        <div btn class="ring r-outer"></div>
        <div btn class="ring r-middle"></div>
        <div btn class="ring r-center"></div>
    </div>
Run Code Online (Sandbox Code Playgroud)

Jea*_*aul 6

使用JavaScript,您可以按如下方式对悬停区域进行硬编码:

JavaScript的

function animateCircles(obj) {
    var x = window.event.x - obj.offsetLeft;
    var y = window.event.y - obj.offsetTop;
    var img1 = document.getElementById('1');
    var img2 = document.getElementById('2');
    var img3 = document.getElementById('3');

    var centerR = 45;
    var middleR = 75;
    if (x >= img3.offsetLeft + (img3.offsetWidth / 2 - centerR) && 
        x <= img3.offsetLeft + (img3.offsetWidth / 2 + centerR) && 
        y >= img3.offsetTop + (img3.offsetHeight / 2 - centerR) && 
        y <= img3.offsetTop + (img3.offsetHeight / 2 + centerR))
        img3.className += " onhover";
    else
        img3.className = "normal";

    if (x >= img2.offsetLeft + (img2.offsetWidth / 2 - middleR) && 
        x <= img2.offsetLeft + (img2.offsetWidth / 2 + middleR) && 
        y >= img2.offsetTop + (img2.offsetHeight / 2 - middleR) && 
        y <= img2.offsetTop + (img2.offsetHeight / 2 + middleR))
        img2.className += " onhover";
    else
        img2.className = "normal";

    if (x >= img1.offsetLeft && 
        x <= img1.offsetLeft + img1.offsetWidth && 
        y >= img1.offsetTop && 
        y <= img1.offsetTop + img1.offsetHeight)
        img1.className += " onhover";
    else
        img1.className = "normal";
}
Run Code Online (Sandbox Code Playgroud)

您可以使用变量centerR和指定悬停"正方形"(悬停应该发生的图像的中心)的大小middleR.请注意,您还可以改进此代码,以便在图像增长时放大悬停区域,这样当您将鼠标悬停在放大图像之外时,图像才会缩小.请注意,我已故意对图像的所有宽度和高度进行软编码:如果您决定更改图片,则可以提供更大的灵活性.

使用以下HTML:

<div style="position: relative; left: 0; top: 0;">
    <img id="1" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
    <img id="2" src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
    <img id="3" src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
</div>
Run Code Online (Sandbox Code Playgroud)

和CSS:

.normal {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.onhover {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud)

这产生以下结果:

演示

>演示

  • 注意:个别动画也可以从我提供的解决方案中快速构建.只需在if语句中添加一些额外的`add class`和`remove class`行. (2认同)

小智 1

我认为你需要 => JSFiddle 演示:)

    div:hover > img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
Run Code Online (Sandbox Code Playgroud)

  • “悬停效果应用于整个图像，而不仅仅是图像部分” (4认同)

归档时间：

查看次数：

1538 次

最近记录：

10 年 前
相关归档
空数组似乎同时为真和假 192
在jquery中启用/禁用下拉框 64
React Hook在useEffect中使用async函数的警告:useEffect函数必须返回一个清理函数或什么也不返回 59
如何使用twitter bootstrap显示/隐藏特定警报？ 30
CSS模糊背景图像,但不是内容 28
CSS从角落动画中透露出来 26
使用SVG作为背景图像 25
从数组调用多个ajax并在完成时处理回调 18
我应该从HTML还是XHTML开始？ 17
单击按钮后实现拖放angularjs的CSS3样式 16
难疑归档
基于表单的网站身份验证的权威指南 5311
是什么 !!(不是)JavaScript中的运算符？ 2906
检测未定义的对象属性 2742
确定已安装的PowerShell版本 2543
如何在Windows上安装pip？ 2469
在jQuery中创建div元素 1500
如何从其他线程更新GUI？ 1331
如何从git存储库中删除目录？ 1138
.NET - 枚举的jSON序列化为字符串 1088
#Hibernate hbm2ddl.auto配置的可能值是什么,它们做了什么 1046