CSS 代码 鼠标经过透明度

Posted 2023-05-17

<img src=" http://www.soubaob.com/wp-content/themes/tstyle/img/logo-head.gif" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> 这段代码是显示图片透明度效果， 鼠标不经过时图片呈灰色模糊效果，当鼠标滑过图片时图片呈原图色彩，请问在网页中如何添加全局CSS控制 整个网页中的图片都呈这样的效果

将样式写在css里。不要写在img标签里。同样，在外部写js,,我写的是jquery的。css如下：
<style type="text/css">
img opacity:0.4;filter:alpha(opacity=40);
</style>
将这个保存为layout.css。在html里如下调用
<link rel="stylesheet" type="text/css" href="../layout.css">
也可以不用css，将下面js代码里我注释掉的那一行取消注释，跟用css的效果一样。
js如下：
<script type="text/script">
$(function()
//$("img").css("opacity","0.4");
$("img").hover(function()
$(this).css("opacity","1");
,
function()
$(this).css("opacity","0.4");
)
)
</script>
将这个js保存为imghover.js。然后再html里如下调用
<script src="。。/jquery-1.4.2.min.js" type="text/javascript"></script>//自己下一个jquery-1.4.2.min.js。
<script src="。。/imghover.js" type="text/javascript"></script> 参考技术A 将样式写在css里。不要写在img标签里。同样，在外部写js,,我写的是jquery的。css如下： <style type="text/css"> img opacity:0.4;filter:alpha(opacity=40); </style> 将这个保存为layout.css。在html里如下调用 <link rel="stylesheet" type="text/css" href="../layout.css"> 也可以不用css，将下面js代码里我注释掉的那一行取消注释，跟用css的效果一样。 js如下： <script type="text/script"> $(function() //$("img").css("opacity","0.4"); $("img").hover(function() $(this).css("opacity","1"); , function() $(this).css("opacity","0.4"); ) ) </script> 将这个js保存为imghover.js。然后再html里如下调用 <script src="。。/jquery-1.4.2.min.js" type="text/javascript"></script>//自己下一个jquery-1.4.2.min.js。 <script src="。。/imghover.js" type="text/javascript"></script> 参考技术B <style type="text/css"> <!-- * img opacity:0.4;filter:alpha(opacity=40); --> </style> 鼠标经过的效果，应该是要用JS来实现了吧。。。抱歉，那个我不会。。。本回答被提问者采纳

css3 实现鼠标放上去图片外框不变大，里面中心放大

参考技术A 在前端开发过程中，要求实现背景色透明度0.8，但是文字颜色要求按给定颜色设置。

如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red,green,blue,opacity)来对背景色进行设置,这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。
web前端超出两行用省略号表示

效果图：

layui/js/jquery图片切换.html文件

layui/js/jquery图片切换.js文件