图片+css实现半透明引导页

先上效果图:

css:

.ydy{
	width:100%;
	height:100%;
	overflow:hidden;
	background-color:#000000;
	filter:alpha(opacity=80);
	-moz-opacity:0.6;
	-khtml-opacity:0.6;
	opacity:0.6;
	position:absolute;
	top:0px;
	z-index:9999px;
}
.ydy img{
	width:100%;
}

html页面上只需一个div即可:

<body style="background: #F5F5F5;">
	<div id="ydy" class="ydy"><img src="../img/ydypic.png"></div>
	<H2>这是一个测试页面</H2>
</body>

加上一个透明的图片即可实现用户引导页的功能,例如新版功能介绍、用户引导等功能!

我的个人博客:http://blog.caicongyang.com ;

我的个人网站:http://www.caicongyang.com ;

我的CSDN博客地址: http://blog.csdn.net/caicongyang ;

时间: 2025-01-04 17:29:52

图片+css实现半透明引导页的相关文章

jQuery插件实现的页面功能介绍引导页效果

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它. 先点击这里可以看在线演示效果 HTML 首先记得加载所需的css文件和jQuery库文件,以及pagewalk

wap2app(三)-- 添加引导页

1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plusReady() }else{ document.addEventListener('plusready',plusReady,false) } function plusReady(){//这里是每次进入应用都会显示引导页,开发中要如何显示引导页视具体的情况而定. var guide = plus.webvi

ViewPager实现引导页

1. 要使用ViewPager,必须要创建 PagerAdapter. 这里创建一个 ViewPagerAdapter来继承PagerAdapter public class ViewPagerAdapter extends PagerAdapter{ private List<View> views; // 我们引导页的list private Context context; // 上下文 public ViewPagerAdapter(List<View> views, Co

Android用户引导页实现,圆点实现动画效果

当前市面上比较流行的应用,用户引导页已经是一个必不可缺的功能点了,简单的介绍下应用的基础功能或者版本升级功能点介绍. 那么常用的用户引导页是如何实现的呢?这篇文章就说说我个人用到的,并且觉得使用不错的效果. 1.首先定义布局文件guide_layout.xml文件,主要使用ViewPager做页面显示,使用一个圆点布局显示圆点,圆点根据图片数目动态添加. guide_layout.xml文件的代码如下: <?xml version="1.0" encoding="utf

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

CSS实现半透明的方法

IE8不支持以前{filter:alpha(opacity=50);}的私有属性, 转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; 加之Firefox2.0和Opera9.0以前版本很少见到, 所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果, 1 <div id="out"> 2 <div id="in">不透

Android引导页设计

大家在安装好一个应用后,第一次打开时往往会出现一个使用引导页,形式一般为三.四张图片,随着我们的滑动进行切换,在最后一页会有一个进入应用的按钮,我们通过点击这个按钮可以进入应用,其实这其中没有太多的复杂的地方,切换的完成就是一个ViewPager,说了这么多,下面开始为大家解读代码: 开始我们的设计之前我们需要做一些准备工作,首先我们新建一个工程,然后选择工程通过右键单击properties,然后选择Java Build Path,点击右侧Libraries,再点击Add jar,将我们工程li

swift3.0 项目引导页

项目引导页并不难,使用 UICollectionView就可以完成, 1.首先获取应用程序的版本号,并存入本地,每次有新版本号,和存入本地的版本号,相比较 fileprivate func setupRootViewController() { window = UIWindow(frame: UIScreen.main.bounds) print(isNewVersion()) window?.rootViewController = isNewVersion() ? NewFeatureCo

iOS App引导页功能实现

一.写作原因 以前都没有想着来写点东西,今天遇到件事情让我决定每次还是要做记录.因为以前自己可以轻松的完成pod spec的配置,但是今天在做的时候还是忘了遇到了很多坑.pod spec配置遇到的坑不在这里写,后面会单独写一点,但是内容不会太多.一是方便别人,二是方便自己. 第一次来发帖,写的不对的地方,请大神指出.我一定好好的努力修改并向大家学习,但是还是不太喜欢一惯的喷子.就像大家说的经典一样`close your mouth show me your code`,英文不好如果错了,大家见谅