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

　　　　例如

<!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. spring security之logoutHandler中的CookieClearingLogoutHandler

    CookieClearingLogoutHandler实现LogoutHandler 接口 在退出登录时实现清除指定“name” 的cookie. 例:清除name为Authorization的coo ...

  2. hdu 6196 搜索+剪枝

    Today, Bob plays with a child. There is a row of n numbers. One can takes a number from the left sid ...

  3. Codeforces Round #162 (Div. 2) A~D 题解

    A. Colorful Stones (Simplified Edition) time limit per test 2 seconds memory limit per test 256 mega ...

  4. Httprequest 添加Cookie

    string postData = "Inputs={\"BarCode\":\"" + barCode + "\"}" ...

  5. hexo 博客

    梦飞扬~ 个人网站:Mauger`s Blog 博客园 标签 新随笔 随笔 管理 Github 随笔 - 61  文章 - 1  评论 - 0 使用Node.js+Hexo+Github搭建个人博客 ...

  6. C++_基础4-分支语句和逻辑运算符

    这一部分截取自<C++ Primer Plus>,内容比较简单,很多只取了一些主题关键词,有空再补充: 设计智能程序的一个关键是使程序具有决策能力. 前面一种方式是循环——程序决定是否继续 ...

  7. JSTL的核心标签

    JSTL的核心标签: .if: 语法:<c:if test="" var="" scope=""></c:if> 当 ...

  8. BZOJ - 3489 KD树 范围计数 空间思维转换

    题意:给定数列\(a[1...n]\),\(Q\)次查询\([L,R]\)中只出现一次的最大值 这道题的做法比较劲.. 对每个元素构造三维空间的点\((i,pre[i],next[i])\),查询\( ...

  9. ali代码风格

    如下: <?xml version="1.0" encoding="UTF-8" standalone="no"?><pr ...

  10. oracle 错误实例分析(ORA-01126)

    问题描述 SQL> shutdown immediate ORA-01109: database not open Database dismounted. ORACLE instance sh ...