一、背景

1.背景颜色

　　background-color: red;

2.背景图片

　　background-image: url("../../img/l1.png");

3.图片填充

　　background-repeat: no-repeat;（有这三个常用的属性值： no-repeat、repeat-x、repeat-y）

4.背景图片大小

　　background-size:100% 100%；
　　　　cover（覆盖）:（先让图片水平填满容器）图片等比例缩放，直到最小部分填满容器有可能会出现图片显示不全的效果。
　　　　contain（包含）：（先让图片垂直填满容器）图片也是等比例缩放，直到最大部分填满容器有可能出现图片覆盖不完整。
　　　　100% 100%：让图片水平垂直都刚好填满容器导致图片被拉伸或压缩。

5.背景图片位置

　　background-position: bottom right;
　　　　当只指定x或y中的一个方向时，另外一个方向默认是居中效果；同样它也可以有数值

6.背景图片的开始位置

　　background-origin: padding-box;
　　　　border-box：从外边框出开始显示
　　　　padding-box：从内边距开始
　　　　content-box：从内容处开始*/

7.背景图片剪切位置

　　background-clip: content-box;

8.背景的复合属性

　　background: red url("../../img/j.png") no-repeat 20px 20px;
　　　　它结合了这四个属性background-color、 background-image、background-repeat、 background-position

二、雪碧图

1.词条解释

  　　CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

2.原理

　　　CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

3.代码举例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 28px;
width: 28px;
/**/
background-repeat: no-repeat;
background-image: url("../../img/q.gif");
}
#div2{
background-position: -85px 0;
}
#div3{
background-position: -163px -30px;
}
</style>
<title>雪碧图</title>
</head>
<body>
<div></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

三、超链接的伪类样式

1.未访问状态

　　a:link{ color: blue; }

2.已访问状态

　　a:visited{ color: darkgrey; }

3.鼠标悬浮状态

　　a:hover{ color: red; }

4.鼠标激活选定状态

　　a:active{ color: yellow; }

CSS中的背景、雪碧图、超链接的伪类样式的更多相关文章

  1. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  2. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

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

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  4. 简单的使用gulp生成雪碧图

    有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...

  5. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  6. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  7. gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     ...

  8. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  9. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

随机推荐

  1. 深入理解Android IPC机制之Binder机制

    Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有的进程间通信IPC手段包括(Internet Process Connection): 管道(Pipe).信号(Sign ...

  2. 集群通信组件tribes之使用方法

    上面已经对tribes的内部实现机制及原理进行了深入的剖析,在理解它的设计原理后看看如何使用tribes,整个使用相当简单便捷,只需要四步: ① 定义一个消息对象,由于这个消息对象是要在网络之间传递的 ...

  3. DB 查询分析器 6.03 ，遨游于任何Windows操作系统之上的最优秀的数据库客户端工具

    DB 查询分析器 6.03 ,遨游于任何Windows操作系统之上的最优秀的数据库客户端工具 中国本土程序员马根峰(CSDN专访马根峰:海量数据处理与分析大师的中国本土程序员  ．03版本已经完全兼容 ...

  4. 修改量更新API

    /* Update a Modifier header of type 'PRO' (Promotion) */ l_MODIFIER_LIST_rec.active_flag := 'N'; l_M ...

  5. "《算法导论》之‘图’"：最小生成树（无向图）

    本文主要参考自<算法>. 加权图是一种为每条边关联一个权值或是成本的图模型.这种图能够自然地表示许多应用.在一幅航空图中,边表示航线,权值则可以表示距离或是费用.在一幅电路图中,边表示导线 ...

  6. linux下64位汇编的系统调用(4)

    经过上一篇的铺垫貌似可以很轻松的用汇编写出mmap的代码来,可仔细一看,还是有不少问题需要解决: 1.系统调用mmap如果出错并不直接返回MAP_FAILED(-1),而是一个"类似&quo ...

  7. SQLSERVER 执行过的语句查询

    total_worker_time AS [总消耗CPU 时间(ms)], execution_count [运行次数], qs.total_worker_time AS [平均消耗CPU 时间(ms ...

  8. c# http请求ajax页面

    我们在用Http请求的时候,某些页面是ajax加载的,所以请求过来的页面数据不完整.也就是说ajax局部加载数据的地方,我们请求不到,这时候该怎么办呢? WebDriver+phantomjs 这两个 ...

  9. CALayer的属性和使用

    一.CALayer的常用属性 1.@propertyCGPoint position; 图层中心点的位置,类似与UIView的center:用来设置CALayer在父层中的位置:以父层的左上角为原点( ...

  10. nginx日志中添加请求的response日志

    换个新公司,做一些新鲜的事情,经过一天的琢磨,终于成功添加response日志 在nginx的日志中添加接口response的日志 由于此功能在nginx内置的功能中没有,需要安装第三方模块ngx_l ...