一、背景

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. python 去掉 pyc

    python 去掉 .pyc 在开发的机器上(Ubuntu),python自动生成的pyc文件太影响心情,把下面的语句添加到 /etc/profile中: # do not produce .pyc ...

  2. (NO.00001)iOS游戏SpeedBoy Lite成形记(一)

    这是本猫第一个原创iOS游戏,留此为证!看编号貌似要写9万多个,千锤百炼还是太少吧!? ;) 这是一个赛跑游戏,几位选手从起点跑到终点看谁用的时间最少.现在需要实现的功能是: 1.8位选手从起点移动至 ...

  3. HTTP2概述

    HTTP/2 提供了HTTP语义的传输优化.HTTP/2支持所有HTTP/1.1的核心特征,并且在其他方面做的更高效. HTTP/2中基本的协议单位是帧.每个帧都有不同的类型和用途.例如,报头(HEA ...

  4. RTMPdump 使用说明

    RTMPDump v2.4 2012-07-24RTMPDUMP(1) 名称 rtmpdump - (RTMP流媒体客户端)RTMP streaming media client 使用参数 rtmpd ...

  5. Leetcode_198_House Robber

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

  6. 苹果新的编程语言 Swift 语言进阶（十）－－类的继承

    一.类的继承 类能够从其它类继承方法.属性以及其它特性,当一个类从另外的类继承时,继承的类称为子类,它继承的类称为超类.在Swift中,继承是类区别与其它类型(结构.枚举)的基础行为. 1.1 .类的 ...

  7. thrift实现HDFS文件操作

    thrift 文件如下 namespace java com.pera.file.transform struct  File{     1:string path ,     2:string co ...

  8. XMPP系列(五）---文件传输

    xmpp中发送文件和接收文件的处理有些不太一样,接收文件处理比较简单,发送稍微复杂一些. 首先需要在XMPPFramework.h中添加文件传输类 //文件传输 //接收文件 #import &quo ...

  9. 根据isbn获得图书的所有信息

    几点说明 1这个豆瓣的api https://api.douban.com/v2/book/isbn/:9787549208869 可以以json的形式返回书籍的所有信息 2最开始的时候是我自己写的用 ...

  10. mac OS X 10.10更新gcc 4.9.1后默认无法编译连接的问题

    MAC OS X10.10升级前使用的低版本的gcc(好像是4.7.x),正常编译可以完成,不过会出现警告: couldn't understand kern.osversion `14.0.0' 网 ...