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

　　　　例如

<!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. SDUT OJ 数据结构实验之二叉树一：树的同构

    数据结构实验之二叉树一:树的同构 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  2. SDUT OJ 数据结构实验之链表五：单链表的拆分

    数据结构实验之链表五:单链表的拆分 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...

  3. redis incr自增指定的无限期 key 删除问题

    不得不说,最近在使用redis的incr的功能的时候,着实是踩了不少的坑啊! 前面我写的一篇文章里面,我提到通过incr产生的键在用普通的get的方式去获取的时候,是获取不到的,所以我不得不通过特殊的 ...

  4. Django - Xadmin 组件（二）

    Django 自带的 admin 组件可以自定义配置,本文实现 Xadmin 对自定义显示数据列 (list_display) 的配置. 构建表单数据 模板层 从视图函数传来的数据变量是双层列表,第一 ...

  5. Luogu P1282 多米诺骨牌 DP。。背包？

    背包...差不多..QWQ 设f[i]为达到差值为i的状态需要多少次,那就很显然了: 注意区分正负不同的代价的循环方向 技巧:如果不想改负数的话,那可以移动一下数组下标,用一个新的指针指向原来的数组 ...

  6. 2017西安区域赛A / UVALive - 8512 线段树维护线性基合并

    题意:给定\(a[1...n]\),\(Q\)次询问求\(A[L...R]\)的异或组合再或上\(K\)的最大值 本题是2017的西安区域赛A题,了解线性基之后你会发现这根本就是套路题.. 只要用线段 ...

  7. [转] CSS 选择器参考手册

    [From] http://www.w3school.com.cn/cssref/css_selectors.asp CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. ...

  8. Redis主从、哨兵、集群的简单区别

    2018-10-26 主从:读写分离,备份哨兵:监控,自动转移,选主集群:数据 hash 分片,同时包含主从及哨兵特性

  9. BeautifulSoup库应用实例

    获取博客园本人的积分排名数据: 1. 抓包获取积分排名数据返回接口:http://www.cnblogs.com/belle-ls/mvc/blog/sidecolumn.aspx?blogApp=b ...

  10. vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）

    HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模 ...