正文

雪碧图应用

王小伞  王小伞  2022-08-08  558

关键词：

最近学习了雪碧图的使用，雪碧图的好处这块就不多说了，只说应用部分。

雪碧图的使用依赖于background-position这个属性，属性值分别为x,y轴的值，图片的显示大小由容器决定，简单点说，就是承载该图片的大小是多大显示区间就是多大，起始点就是background-position属性值的坐标。

素材取自慕课网雪碧图课程http://www.imooc.com/code/1992

<!DOCTYPE html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title>
</head>
<style>
    /*清除默认样式*/
   html,body,ul,li,button,div,input,a{ padding:0; margin:0; }
   a{text-decoration:none}
   body{ font-size:10px;}
   .content input::-webkit-input-placeholder {color:#ccc;padding-left:30px;}
</style>
<style>
    /*书写样式*/
    .content{margin-top:15px;padding:10px; width:190px;height:240px;background-color:#deeaf6;}
    .content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}
    .content .text a{float:right; color:#696BF6;}
    .content input[type=‘text‘]{margin-bottom:15px;border:1px solid #CDCACA;width:100%; height:30px;border-radius:5px;background-color:#fff;}
    .button button{background:url("http://img.mukewang.com/539a972b00013e9102280177.jpg") no-repeat;width:100%;height:38px; margin-top:15px;border:none;
    }
    .button .btn1{background-position:0 0; }
    .button .btn2{background-position:0 -38px;  }
    .button span{display:inline-block; width:100%;height:15px;border-bottom:1px solid #ccc; }
</style>
<body>
<div class="content">
    <input type="text" placeholder="邮箱/手机号/用户名"/>
    <input type="text" placeholder="请输入密码"/>
    <div class="text">
        <input type="checkbox" id="box"/>
        <label for="box">下次自动登录</label>
         <a href="#">忘记密码？</a>
    </div>
   
    <div class="button">
        <button class="btn1"></button>
        <span></span>
        <button class="btn2"></button>
    </div>
</div>
</body>
</html>

书写过程中遇到的几个小问题：

清除a标签样式

　　使用text-decoration:none。其他属性overline——上划线，underline——默认的下划线，line-through——贯穿线

改变placeholder的样式

　　因为不同浏览器存在兼容性问题，这里主要设置webkit内核浏览器、火狐浏览器、IE浏览器三种，伪类的写法如下：

::-moz-placeholder{color:red;}              //ff19+
:-moz-placeholder{color:red}　　　　　　 //ff18-
::-webkit-input-placeholder{color:red;}     //chrome,safari
:-ms-input-placeholder{color:red;}          //ie10

复选框与文字不对齐的解决：

　　这个问题设置默认的margin和padding是无法去掉的，可以为复选框和文字都使用vertical-align:middle属性即可，如文中代码：

.content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}

去除输入框获取焦点时的浅蓝色边框

　　设置input属性outline:none

自适应页面中如何使用雪碧图

　　自适应页面你肯定听说过，雪碧图想必你也听说过，不过在自适应页面中使用雪碧图应用的场景却不多，因为很多场景里自适应页面(移动端页面)的小图标啥的基本都做成字体图标了，操作起来也比较方便，不过有时候合成... 查看详情

canvas动画原理与fabric实现

...在Canvas中绘制动画效果。在HTML5的Canvas中结合JS可以绘制雪碧图动画，动画在一些H5游戏中或者富交互的应用中被广泛使用。游戏的动画帧可以在一个单独的图片中保存，然后使用HTML5的Canvas结合JS在特定的时间点来绘制特定的内... 查看详情

前端工程师技能之photoshop巧用系列第五篇——雪碧图

...前面的话　　前面已经介绍过，描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图定义　　css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图... 查看详情

photoshop制作雪碧图技巧

雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。步骤：1、使用Photoshop新建一张背景透明的图片2、将... 查看详情

cssspritec下载,精灵图，雪碧图，初探之原理使用

CSSSpritec下载,精灵图，雪碧图，初探之原理、使用关于CSSSprite　　CSSSprites在国内很多人叫css精灵雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问... 查看详情

css雪碧图压缩

cssgaga下载地址链接:https://pan.baidu.com/s/1Q9xH_XzumIc7vTLCZ3tr5A提取码:stqeCssGaga功能特性合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；优化、压缩CSS代码，减少带宽占用，加快下载速度；优... 查看详情

sprite(雪碧图)的应用

雪碧图是根据CSSsprite音译过来的，是将很多很多的小图标放在一张图片上。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服... 查看详情

web前端html5&css314-雪碧图与渐变(代码片段)

雪碧图与渐变笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版目录雪碧图与渐变1.雪碧图2.线性渐变3.径向渐变雪碧图与渐变1.雪碧图解决图片闪烁的问题：可以将多个小图片统一保存到一个大图片中，然后通过... 查看详情

精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术原理:将多张单一的图片整合到一张图上，以背景引入,并使用background-position调整背景位置，使之显示不同图片目的:降低浏览器向服务器的请求次数,提高网页加载速... 查看详情

csssprite雪碧图

一、什么是雪碧图？1、我们先来看一下淘宝上面用到的雪碧图实例：a、前端展示 b、css雪碧图为 &nbs 查看详情

雪碧图制作使用的几种方式！

　　对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！　　一、雪碧图制作　　在线生成雪碧图网站　　网站的内容如下：通过点击左侧，我们可以选择一个文件夹，将我们希望... 查看详情

雪碧图制作使用的几种方式！

对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！　　一、雪碧图制作　　在线生成雪碧图网站　　网站的内容如下：通过点击左侧，我们可以选择一个文件夹，将我们希望合成... 查看详情

css雪碧图(代码片段)

CSSSprite初探之原理、使用CSSSprite简介：利用CSSSprites能很好地减少了网页的http请求次数，从而大大的提高了页面的性能,节省时间和带宽。CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及... 查看详情

css雪碧图（csssplite）

将很多小的背景图片放在一起，可以减少http请求. 这些图片通常是一类的。所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间0=0 查看详情

使用雪碧图csssprite精灵|加速网页响应速度

什么是CSSSprite精灵？是用于前端的一种图片应用技术，通常情况，我们的开发的网页或许有很多张图片，假如在一个页面上有50多张小图片，这意味着浏览器要逐个下载50张图片。CssSprite它允许你将一个页面涉及到的所有零星图... 查看详情

网站性能优化之雪碧图制作

雪碧图制作及使用制作目的：由于网站上有需要小的icon且每次加载的时候都会有许多类似的请求，影响了网站的性能。所以将小图标合并成一张雪碧图，从而减少图片的请求数，优化网站性能。制作方法：1、刀耕火种法利... 查看详情

css中雪碧图(sprite)的使用及制作方法

雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用... 查看详情

雪碧图布局(代码片段)

...每种动画类型都需要一个对应的动画图标，这里就使用了雪碧图。一、什么是雪碧图百度百科：CSS雪碧即CSSSprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景... 查看详情