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

　　　　例如

<!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. 【AT2434】JOI 公園 (JOI Park) 最短路+贪心

    题解 我的歪解 我首先想的是分治,我想二分肯定不行,因为它是没有单调性的. 我想了一下感觉它的大部分数据应该是有凸性的(例如\(y=x^2\)的函数图像),所以可以三分. 下面是我的三分代码(骗了不少 ...

  2. 忘记commit也会造成select查询的性能问题

    今天遇到一个很有意思的问题,一个开发人员反馈在测试服务器ORACLE数据库执行的一条简单SQL语句非常缓慢,他写的一个SQL没有返回任何数据,但是耗费了几分钟的时间.让我检查分析一下原因,分析解决过后 ...

  3. 2、开始学习C++

    1.创建C++程序 C++程序是严格区分大小写,Cout与COUT都是识别不出来的,下面给出了一段简单的C++程序. #include "stdafx.h" #include &l ...

  4. django中的setting最佳配置小结

    Django settings详解 1.基础 DJANGO_SETTING_MODULE环境变量:让settings模块被包含到python可以找到的目录下,开发情况下不需要,我们通常会在当前文件夹运 ...

  5. 事件获取目标 currentTarget target srcElement 三者之间的区别和联系

    currentTarget   指的是触发事件的当前对象,可以是冒泡和捕获的对象,不一定是点击或者鼠标移入等事件的直接触发对象.可以是他的父元素等. target 指的是事件触发的直接对象.IE有兼容 ...

  6. [转] 最简单实现跨域的方法：使用nginx反向代理

    [From] http://blog.jobbole.com/90975/ 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全 ...

  7. Oracle date和timestamp区别

    <转自> http://blog.csdn.net/huaguoming/article/details/8693679 在今天的工作中,学到了以下几个知识点: 一.date和timest ...

  8. WPF 使用第三方ttf字体

    1.将字体文件直接添加到项目中,注意:将文件的“属性”--“生成操作”设置为“Resource” 2.在Xaml中使用,text可以使用文字或直接使用unicode编码,XAML中使用Unicode编 ...

  9. PIE SDK图像裁剪

    1.算法功能简介 图像裁剪的目的是获取选定的影像范围区域.图像裁切工具提供像素范围裁切.矢量裁切.栅格图像裁切和几何图元裁切四种方式. 像素范围裁切是基于像素坐标获取矩形裁切区域的裁切方式:矢量裁切是 ...

  10. PHP unlink删除本地中文名称的文件

    由于编码不一样,用unlink()方法删除本地中文名称的材料之前,必须先转码,才能删除成功. 核心代码如下: //删除本地的议题材料(本地上传的材料)             if($local_ma ...