gif背景图html,CSS按钮及gif背景图片的运用

很多网站的按钮都是通过 JavaScript 改变背景图片来实现的，例如：

style="width:70px; height:35px; background:url(bg.jpg);"

οnmοuseοver="this.style.background='url(bg2.jpg)'" οnmοuseοut="this.style.background='url(bg.jpg)'">

这样的坏处是，比较费资源，频繁在按钮上晃，你会发现CPU使用会高很多。

用CSS可以避免这样的问题。下图是示例图片bg.jpg，两张切换的背景连着一张图片，这样可以避免切换时还要下载另一张背景图片。

代码如下：

.button a {

width:70px;height:35px; background: url(bg.jpg) 0 0 no-repeat;

}

.button a:hover {

background: url(bg.jpg) 0 -35px no-repeat;

}

上面代码的核心是：

background

: background-color || background-image || background-repeat || background-attachment || background-position

background-position

: length || length

background-position

: position || position

取值：

length

:　百分数 | 由浮点数字和单位标识符组成的长度值。

position

简单点讲就是鼠标移到图片上后，背景使用图片的下半部分。

转自http://lintex.blog.sohu.com/86027591.html

但是很多时候我们是这样用的：加入有两个按钮，一个向左，一个向右，那么怎么让它们显示我们所想要的图片呢？

.prevPhoto input, .nextPhoto input {

background:transparent url(../../images/photoPager_bg.gif) no-repeat scroll0 0

;

border:0 none;

cursor:pointer;

display:block;

float:left;

height:19px;

margin:0 auto;

overflow:hidden;

padding:0;

text-indent:-9999px;

width:72px;

}

注意看红色加粗部分，我没有像之前那样将背景分别加载，而是将左右按钮放到了一起，那么该如何选择需要显示的图片呢？

.prevPhoto input {

background-position:0 -20px;

float:left;

}

.nextPhoto input {

background-position:0 -40px;

float:right;

}

上面的大家应该都能看懂的，这里有一个必须要提醒大家，就是

.prevPhoto input

和.nextPhoto input

必须在

.prevPhoto input, .nextPhoto input

后面

。

gif背景图html,CSS按钮及gif背景图片的运用相关推荐

直播间背景图怎么设计？直播间背景设计软件分享。
直播间背景图怎么设计?直播间背景是指直播时所展示的背景墙或屏幕,通常用于营造氛围和增强视觉效果.在直播中,背景可以承载主播个人风格.节目内容.品牌形象等信息,同时也是吸引观众注意力和提高观看体验的重要 ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
怎么更换vscode背景图，放入自己喜欢的图片
安装background插件 vscode插件市场下载插件然后配置这里配置给大家 // 是否开启背景图显示"background.enabled": true,// true- ...
抖音同款抖音城堡微信背景图，抖音城堡微信背景图
抖音同款抖音城堡微信背景图
php添加背景图及设置格式,PHP添加PNG图片背景透明水印操作类定义与用法示例
本文实例讲述了PHP添加PNG图片背景透明水印操作类定义与用法.分享给大家供大家参考,具体如下: 图片相关操作类 class ImageTool { private $imagePath;//图片路径 ...
vue 背景图自适应_Vue的自适应视频背景播放器
vue 背景图自适应 Vue响应视频背景播放器 (vue-responsive-video-background-player) Play your own videos in background ...
图片加载未完成时的默认背景图处理(仅限自己封装的图片加载工具)
Android图片加载时,由于网络状况图片大小手机内存等情况会导致加载图片的时长不同,这时候就涉及到给ImagevVew设置默认图片的问题. 当然了,最简单的方法就是在每个使用ImageVie ...
计算机过去与未来ppt背景图,过去无可挽回未来可以改变背景图高清图片大全
过去无可挽回未来可以改变背景图高清图片大全是一组在抖音上面很火爆的表情包图片,一组超多内容可以去查看的素材.会让用户在线很简单的进行下载,还可以免费的就会让用户进行使用.大量会帮助到用户进行保存的内容 ...

gif背景图html,CSS按钮及gif背景图片的运用

gif背景图html,CSS按钮及gif背景图片的运用相关推荐

最新文章

热门文章