一、背景

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. 结构体:探析C#文件方式读写结构体

    最近直在研究Net Micro Framework字体文件(tinyfnt)由于tinyfnt文件头部有段描述数据所以很想 定义个结构体像VC样直接从文件中读出来省得用流个个解析很是麻烦 没有想到在中 ...

  2. 怎样将Android手机弄死机？

    将Android手机弄死机目前知道有两种方式: 第一种: 以root权限在shell中执行 stop 通过 start 但是这种串口还是可以用 第二种: suecho "c" &g ...

  3. shell 常用正则表达式

    "^\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\d+)|(0+))$" ...

  4. 【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

    . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...

  5. PS 图像调整算法——自动色阶 （Auto Levels）

    PS 给出的定义: Enhance Per Channel Contrast:Maximizes the tonal range in each channel to produce a more d ...

  6. 【编程练习】收集的一些c++代码片，算法排序，读文件，写日志，快速求积分等等

    写日志: class LogFile { public: static LogFile &instance(); operator FILE *() const { return m_file ...

  7. LeetCode(69)-Reverse String

    题目: Write a function that takes a string as input and returns the string reversed. Example: Given s ...

  8. LeetCode(62)-Two Sum

    题目: Given an array of integers, return indices of the two numbers such that they add up to a specifi ...

  9. asp.net 分布式探讨之Session共享问题

    ---恢复内容开始--- Session共享是分布式架构设计中的一大难点,尽管session共享的解决方案不少,但是.net 下的解决方案还是比较少,而且说明文档也很少. 之前尝试用memcached ...

  10. 大数据批量导入，解决办法，实践从定时从 sqlserver 批量同步数据到 mySql

    c#代码,批量导入数据代码 public class MySql_Target : ZFCommon.DataAccesser.Base.DABase { public MySql_Target() ...