图片小精灵，当有整张图片时可以通过图片小精灵设置图标。

　　　　例如

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#xiao{

				width: 50px;

				height:50px;

				border: 1px solid red;

				position: absolute;

				top: 100px;

				left: 200px;

				background:url(floor_nav.png) no-repeat;

				background-position:0px -110px;

			}

		</style>

	</head>

	<body>

		<div id="xiao">

		</div>

	</body>

</html>

　　2.当同时给一个块级元素设置背景颜色和背景图片时解决问题

　　　　分开设置每一个属性

　　　　background-color:  ;

　　　　background-image:  ;

　　3.

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			body{

				background-image:url(../images/tupian/亚麻布_看图王.jpg);

			}

			#wrap{

				width: 500px;

				margin: 0 auto;

			}

			#login{

				width:350px;

				height:400px;

				background-color: #F7F7F7;

				position: absolute;

				margin: 50px;

				box-shadow: 2px 2px 10px 8px #C9CDD4;

				z-index: 2;

				border-radius: 5px;

				left:424px;

			}

			input{

				position: relative;

				top:90%;

				left:45%;

			}

			#register{

				width:350px;

				height:520px;

				background-color: #F7F7F7;

				position: absolute;

				margin: 50px;

				box-shadow: 2px 2px 10px 8px #C9CDD4;

				border-radius: 5px;

				opacity: 0;

				left:374px;

			}

		</style>

		<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(function(){

				$("#login>input").on("click",function(){

					$("#login").animate({

						left:"-450px",

						opacity:"1"

					},500,function(){

						$("#login").css({

							left:"374px",opacity:0

						});

					});

					$("#register").animate({

						left:"424px",

						opacity:"1"

					},500);

				});

				$("#register>input").on("click",function(){

					$("#register").animate({

						left:"-450px",

						opacity:"1"

					},500,function(){

						$("#register").css({

							left:"374px",opacity:0

						});

					});

					$("#login").animate({

						left:"424px",

						opacity:"1"

					},500);

				});

			});

		</script>

	</head>

	<body>

		<div id="wrap">

			<div id="login">

			      <input type="button" name="" id="" value="register" />

			</div>

			<div id="register">

			      <input type="button" name="" id="" value="login" />

			</div>

		</div>

	</body>

</html>

　　

图片小精灵 & 解决同时给一个元素设置背景问题 &jq登录注册切换的更多相关文章

  1. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  2. DISCUZ! X2.5设置仅允许QQ登录注册论坛 加固会员注册机制

    论坛稍微有点起色之后,很多站长就会担心论坛经常被人恶意灌水.注册机.顶贴机等等一些列非法的手段.通常站长都会通过一些后台的设置和插件等等一 切有效的方法预防,但更多的站长会通过限制用户注册会员,需注册 ...

  3. [转]怎么把一个textview的背景图片设置成圆角的？

        在drawable文件夹下新建一个文件设置背景样式代码:在drawable文件夹下面新建text_view_border.xml<?xml version="1.0" ...

  4. 解决css设置背景透明，文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

  5. 对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效

    作者:孙志勇 微博 日期:2016年12月5日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间 ...

  6. UIView 设置背景图片

    http://blog.csdn.net/qijianli/article/details/7777268 项目中,可能需要我们为某个视图设置背景图片,而API中UIView没有设置背景图片的方法,那 ...

  7. html元素是否包含另外一个元素，以及classList属性

    如何判断一个元素A包含了元素B呢?如果不用contains方法的话,如何做呢? 腾讯面试的时候也出了这道题啊,当时没看dom的知识,所以一抹黑哦... 那就判断B是否为A的child喽,那也就是A是B ...

  8. 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  9. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. Python博文列表

    手把手|100行Python代码自动抢火车票!(包教包会):https://zhuanlan.zhihu.com/p/32928355 最全中华古诗词数据库, :https://github.com/ ...

  2. 如何把win10系统迁移到SSD固态硬盘

    https://jingyan.baidu.com/article/5d368d1ec59ac43f60c05733.html 我之前将两个盘都已经固定在笔记本内,迁移完之后无论怎么改还是从原来的机械 ...

  3. git 设置代理.

    git 设置代理:(因为网络有时太慢,需要用到 ss 代理..) git config --global http.proxy http://127.0.0.1:1080 取消 代理 git conf ...

  4. yyy的python3第八天学习

    望着小月亮:https://www.cnblogs.com/triple-y/ 请尊重原创:https://www.cnblogs.com/triple-y/p/9655753.html python ...

  5. 查找表，Two Sum，15. 3Sum，18. 4Sum，16 3Sum Closest，149 Max points on line

    Two Sum: 解法一:排序后使用双索引对撞:O(nlogn)+O(n) = O(nlogn) , 但是返回的是排序前的指针. 解法二:查找表.将所有元素放入查找表, 之后对于每一个元素a,查找 t ...

  6. Spring中如何向 Bean注入系统属性或环境变量

    [转自] http://unmi.cc/spring-injection-system-properties-env/ 在 Spring 中为 javabean 注入属性文件中的属性值一般人都知道的, ...

  7. Oracle 常用函数大全

    Oracle 11g 常用函数(Functions)详解 目录 ABS. 3 ACOS. 3 ADD_MONTHS. 4 ASCII 4 ASCIISTR. 5 ASIN.. 5 ATAN.. 5 A ...

  8. Java打包成jar

    若要生成一个名为 cal.jar 的可执行jar文件:(文件名可以是任意合法名字)  (这是我认为简单实用的一种方法,还有很多别的方法在此就不介绍了)  第一 把程序生成的所有字节码文件(即.clas ...

  9. 计算两个日期相差的天数 js php日期 减一年

    计算两个日期相差的天数 //sDate1和sDate2是yyyy-MM-dd格式 function dateDiff(sDate1, sDate2) { var aDate, oDate1, oDat ...

  10. PIE SDK专题制图打开模板

    1.    功能简介 在PIE SDK中,所有的制图元素.视图范围以及排版等都可以保存成一个模板,以供多次重复使用.使用时只需要打开该模板,加载相应数据,就可以直接出图了,省去了重复制作图幅的麻烦,方 ...