gpt4 book ai didi

javascript - 悬停时图像发光

转载 作者:行者123 更新时间:2023-11-28 07:23:49 24 4
gpt4 key购买 nike

这种 css 语言对我来说是全新的,如果可以的话,我只是有几个问题。我喜欢图像在它周围发光,或者像这样从较浅的不透明度变为其原始颜色 --> (output.jsbin.com/vahaseduka)//codepen.io/anon/pen/ilqnb(相机图像是一个我将使用的实际图像)

我用了别人的示例代码来实现这个效果。

除了两个品质外,我对图像感到满意。 *悬停时会出现一个框框边框 ---> i59.tinypic.com/2dmayyv.jpg ....我不喜欢悬停时的那个框架(框),我该如何删除它?

此外,正如我们所见,如果没有滚动条,我无法将照片的大小调整为与 id 一样的大小?我正在使用 wix.com 构建站点,这是与站点的兼容性问题?或者,我应该在 Photoshop 中缩小图像尺寸吗?

这个元素的代码是:

    #ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
background: transbox;
}
#ex5 img {
margin: 0px;
opacity: 0.8;
border: 0px transbox #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
-moz-box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
}
<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
</style>
</head>

<body>
<div id="ex5">
<img src="http://i57.tinypic.com/2poqqsn.png">

</div>
</body>

</html>

最佳答案

出现滚动条是因为边框有效地改变了框的大小。我建议你阅读 the box model .

至于您的特定问题,请尝试将 box-sizing: border-box; 添加到您的图像 #ex5 img 中,它可能会帮助您避免那些出现的滚动条因为您要从 CSS 设置宽度/高度。避免它们的其他 hacky/丑陋方法是设置 overflow: hidden; 这可能会在边界附近裁剪图像并产生不良结果。

关于javascript - 悬停时图像发光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31932583/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com