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

　　　　例如

<!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. 单据头->实体服务规则中根据单据类型设置可见性或必录等

  2. JUC包下CyclicBarrier学习笔记

    CyclicBarrier,一个同步辅助类,在API中是这么介绍的: 它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这 ...

  3. Qt 学习之路 2（69）：进程

    Qt 学习之路 2(69):进程 豆子 2013年11月9日 Qt 学习之路 2 15条评论 进程是操作系统的基础之一.一个进程可以认为是一个正在执行的程序.我们可以把进程当做计算机运行时的一个基础单 ...

  4. day--39-MySQL的多表查询

    多表查询一:表的基本介绍 可以参考:https://www.cnblogs.com/cdf-opensource-007/p/6517627.html 建立一个员工表信息表和一个部门表,每个员工都对应 ...

  5. C++_类和动态内存分配3-构造函数中使用new的注意事项

    如果在构造函数中使用new来初始化对象的指针成员时必须特别小心. 1 如果在构造函数中使用new来初始化指针成员,则应在析构函数中使用delete. 2 new和delete必须相互兼容.new对应于 ...

  6. 【算法笔记】B1047 编程团体赛

    1047 编程团体赛 (20 分) 编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队 ...

  7. 【数学】【筛素数】Miller-Rabin素性测试 学习笔记

        Miller-Rabin是一种高效的随机算法,用来检测一个数$p$是否是素数,最坏时间复杂度为$\log^3 p$,正确率约为$1-4^{-k}$,$k$是检验次数. 一.来源     Mil ...

  8. 组合数取模介绍----Lucas定理介绍

    转载https://www.cnblogs.com/fzl194/p/9095177.html 组合数取模方法总结(Lucas定理介绍) 1.当n,m都很小的时候可以利用杨辉三角直接求. C(n,m) ...

  9. Linux mysql中文乱码问题

    1.debian系统 (1)mysql 5.5版本之前 vim /etc/mysql/my.cnf 在  [client]  下面加入 default-character-set=utf8 在  [m ...

  10. 采用MQTT协议实现android消息推送（1）MQTT 协议简介

    1.资料 mqtt官网 http://mqtt.org/ 服务端程序列表 https://github.com/mqtt/mqtt.github.io/wiki/servers 客户端库列表 http ...