一、背景

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. （四十九）Quartz2D自定义控件

    利用Quartz2D来自定义UIImageView: 模仿UIImageView: 设置frame,设置图片. 注意一个细节,自定义的imageView,应该通过重写set方法来设置图片并且重绘,否则 ...

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

    如果选手能在加速的时候屁股产生推进器效果就跟好了,仿佛选手腾云驾雾的感觉.我们可以用Cocos2D中的CCMotionStreak类来轻松实现.下面在Player.h接口文件添加以下代码: @prop ...

  3. 菜鸟玩云计算之廿一: saltstack之pillar

    菜鸟玩云计算之廿一: saltstack之pillar 参考: 点击打开链接 查看pillar数据: # salt '*' pillar.items pillar的默认根目录在:/srv/pillar ...

  4. batch gradient descent（批量梯度下降） 和 stochastic gradient descent（随机梯度下降）

    批量梯度下降是一种对参数的update进行累积,然后批量更新的一种方式.用于在已知整个训练集时的一种训练方式,但对于大规模数据并不合适. 随机梯度下降是一种对参数随着样本训练,一个一个的及时updat ...

  5. Xcode出现may cause a leak的解决

    比如如下代码: -(void)performSelector:(SEL)selector onNode:(CCNode *)node withObject:(id)object recursive:( ...

  6. 基于ARM-contexA9按键驱动开发

    之前我们写过LED和蜂鸣器的驱动,其实那两个都是一个模版的,因为都是将IO口配置成输出模式,然后用高低电平来驱动这些设备.其实linux设备驱动,说白了跟单片机开发的方式是差不多的,只不过内核的开发基 ...

  7. 一个简单的基于 DirectShow 的播放器 1（封装类）

    DirectShow最主要的功能就是播放视频,在这里介绍一个简单的基于DirectShow的播放器的例子,是用MFC做的,今后有机会可以基于该播放器开发更复杂的播放器软件. 注:该例子取自于<D ...

  8. spring注解关键字

    spring注解: (1)@Controller   控制器 (2)@Autowired    按照类型匹配,可以完成对类成员变量,方法及构造函数进行标注,完成自动装配的工作   @Autowired ...

  9. oo第二次博客作业

    多线程协同与同步控制总结 第五次作业-多线程电梯 本次作业是我第一次接触多线程,建立了请求模拟器.调度器和电梯运行三种线程.请求模拟器负责在输入后识别有效请求:调度器在扫描有效请求后将新的请求加入请求 ...

  10. Python_如何去除字符串里的空格

    个人想到的解决方法有两种,一种是 .replace(' old ',' new ')  第一个参数是需要换掉的内容比如空格,第二个是替换成的内容,可以把字符串中的空格全部替换掉. 第二种方法是像这样 ...