一、背景

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. 仿滴滴抢单倒计时的Demo

    滴滴里面有一个下单完成之后等待界面的倒计时转圈的视图... 就是这个... 原理: 通过CAShapeLayer层添加到自己自定义的视图layer上... 设置ShapeLayer的path... 他 ...

  2. Leetcode_171_Excel Sheet Column Number

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42290079 Given a column title a ...

  3. 安卓Tv开发（二）移动智能电视之焦点控制（按键事件）

    原文:http://blog.csdn.net/sk719887916/article/details/44781475 skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家 ...

  4. STM32学习笔记（一）时钟和定时器

    由于近期在准备海洋航行器比赛,正好趁此机会学习一下ARM,看到周围很多同学都在使用32,所以我也买了一块STM32F103ZET6,准备好好地学习一下. STM32的时钟系统相当的复杂,包含了5个时钟 ...

  5. 主流列式数据库评测:InfiniDB

    ).本文测试的InfiniDB版本是2010年12月20日发布的2.02版,下载文件名分别为InfiniDB64-2.0.2-2.exe 和InfiniDB64-ent-2.0.2-2.exe.安装文 ...

  6. Vim/Vi常用操作(第二版)

    周围同事不是用vim就是Emacs,你要是用一ultraedit,你都不好意思跟人家打招呼;什么插件呀,语法高亮呀,拼写检查呀,能给它开的都给它开着,就是一个字儿:酷. 你说这么牛B一东西,怎么着学会 ...

  7. C++中的虚函数表是什么时期建立的？

    虚函数表是在什么时期建立的? 最近参加阿里巴巴公司的内推,面试官问了“虚函数表是在什么时期建立的?”.因为以前对虚函数表的理解不够多,所以就根据程序构建(Build)的四个过程(预编译.编译.汇编和链 ...

  8. saiku查询出错如何debug（saiku查询过程的本质），以及相关workbench的schema设置

    saiku连接infiniDB数据库 1,日期维度无结果. 原因:(数据库表内容出错) 表最后一列(日期字段)匹配出错,用"like %日期%"可以.说明入库时写入多余的空白符,因 ...

  9. HADOOP中的CRC数据校验文件

    Hadoop系统为了保证数据的一致性,会对文件生成相应的校验文件(.crc文件),并在读写的时候进行校验,确保数据的准确性.在本地find -name *.crc -print 看 比如我们遇到的这个 ...

  10. vim多行增加缩进

    http://blog.163.com/clevertanglei900@126/blog/static/11135225920116891750734/ 在Normal Mode下,命令>&g ...