图片与文字半透明效果 鼠标移上不透明

该 DIV是半秀明状态，这样可以看到背景也可以衬托文字，当鼠标放到文字上的时候，DIV层彻底不透明，文字清淅显示出来，一般这种效果都是要配合JavaScript的，这样兼容性会更好。

图片与文字结合的半透明效果，鼠标移上不透明

.box{ width:600px; height:600px; padding:20px;}
*{ margin:0; padding:0;}
body{ background:url(http://zsrimg.ikafan.com/demoimg/200910/wall.gif) no-repeat; width:300px; height:235px;}
.in_box{background:#fff; width:293px; background:rgba(255,255,255,0.4); filter:alpha(opacity=40); }
.box .sub_con{ position:relative; color:#00F; width:100%;}
.ff{background:#fff; width:293px; background:rgba(255,255,255,1); filter:alpha(opacity=100);}

我们（http://www.jb51.net）提供各类编程源码、书籍教程、JavaScript/CSS特效代码等，做有质量的学习型网站。

var hh=document.getElementById('in_box');
var bb;
hh.onmouseover=function(){
bb=this.className;
this.className='ff';
}
hh.onmouseout=function(){
this.className=this.className.replace('ff',bb);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 图片与文字半透明效果 鼠标移上不透明

    该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好. 图片与文字结合的半透明效果,鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(http://files.jb51.net/demoimg/200910/wall.

  • php实现给图片加灰色半透明效果的方法

    本文实例讲述了php实现给图片加灰色半透明效果的方法.分享给大家供大家参考.具体实现方法如下: 原理: 1.首先计算出原图片的尺寸 2.创建相同尺寸的半透明图片 3.使用 imagecopy()方法,把新创建的半透明图片与原图合并 具体实现代码如下: 复制代码 代码如下: <?php /*php 给图片加灰色透明效果*/ $imfile = './0.jpg';//原图 $origim = imagecreatefromjpeg($imfile);//从 JPEG 文件或 URL 新建一图像  

  • Jquery实现鼠标移上弹出提示框、移出消失思路及代码

    思路: 1.首先要定位实现这种效果的元素 ,本次通过class 2.如果是动态显示不同的提示内容,需设置title 3.通过JQ给定位到元素加上 mouseover 和mouseout 事件 4.再完善下,弹出框跟随鼠标在目标元素上移动 5.再把 mouseover .mouseout 合并成 hover 复制代码 代码如下: //页面加载完成 $(function () {     var x = 10;     var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标     $(

  • Vue实现图片与文字混输效果

    用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用 textarea 实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了 掘金 的发布沸点功能,然后就模仿了其作法,于是就有了这篇文章的分享.先给大家展示下最后实现的效果:yum: 实现思路 利用 div 的 contenteditable 属性,让div可编

  • 纯CSS实现的当鼠标移上图片添加阴影效果代码

    纯CSS实现的当鼠标移上图片添加阴影效果代码

    CSS给图片添加阴影 *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(http://files.jb51.net/demoimg/200912/avatar.gif) 0 0 no-repeat;} #profileAv

  • 用jQuery toggleClass 实现鼠标移上变色

    按钮移上变色效果 复制代码 代码如下: <style> .round-corner-btn { -moz-border-radius:4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; width:200px; height:40px; line-height: 40px; background: green; display:inline-block; color:white; tex

  • js图片滚动效果时间可随意设定当鼠标移上去时停止

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • 如何利用Java在图片上添加文字水印效果

    如何利用Java在图片上添加文字水印效果

    目录 前言 [1]获取原图片对象 (1.1)读取本地图片 (1.2)读取网络图片 [2]创建画笔 [3]添加文字水印 [4]获取处理图片 [5]源代码 总结 前言 今天分享一个:通过Java代码,给图片添加文字. 比如下面这个图片,我们在左下角就添加了一个文字版的水印,那么这是如何实现的呢 ? [1]获取原图片对象 首先,第一步,肯定是要让我们的程序,拿到需要处理的图片. 我们程序获取图片的方式,通常有两种,一种是通过下载到本地,从本地读取:另外一种就是通过网络地址进行获取. (1.1)读取本地

  • javascript实现鼠标移到Image上方时显示文字效果的方法

    javascript实现鼠标移到Image上方时显示文字效果的方法

    本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法.分享给大家供大家参考.具体如下: 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • JQuery鼠标移到小图显示大图效果的方法

    本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr

随机推荐