【温故知新】CSS学习笔记（背景）

CSS背景

1、background-color：背景色；

例如：background-color: #000;

外部链接：CSS颜色表

2、background-image：背景图片；

例如：background-image: url(images/ms.jfif);

外部链接：相对位置与绝对位置

3、background-repeat：设置背景图像如何铺排；

repeat：背景图像在纵向和横向上平铺（默认）；
no-repeat:背景图像不平铺；
repeat-x:背景图像在横向上平铺；
repeat-y:背景图像在纵向上平铺；

例如：background-repeat: no-repeat;

4、background-position：设置背景图像的位置；

Position后面可以跟方位名称，他们之间没有前后顺序；

上：top

下：bottom

左：left

右：right

例如：

background-position：center center；水平垂直居中

background-position：center top；水平居中靠上，一般游戏网页背景大图会使用这个方式；

Position如果只写一个值，另外一个则默认是据中的；

例如：

background-position：right；

background-position：bottom；

Position后面同样可以跟精确值（px），但是必须有顺序，先X轴后Y轴；

例如：background-position：12px 50px;

Position后面可以同时跟方位名词和精确值，但是还是需要注意顺序；

例如：

background-position：12px center;

或者background-position：12px ;

5、background-attachment：设置背景图像内容是滚动的还是固定的；

Scroll:背景图像是随对象内容滚动的（默认）；
Fixed:背景图像是固定的；

例如：background-attachment: fixed;

【综合样例代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>魔兽世界怀旧版</title><style>body {background-image: url(images/ms.jfif);background-position: center top;background-repeat: no-repeat;background-color: #000;background-attachment: fixed;}</style>
</head>
<body></body>
</html>

便捷方式- background简写

属性值的书写顺序没有强制的标准，但是为了可读性，建议如下写书：

Background：背景颜色背景图片地址背景平铺背景滚动背景位置

上面样例就可以简写成如下形式：

background: #000 url(images/ms.jpg) no-repeat fixed center top；

【温故知新】CSS学习笔记（背景）相关推荐

css --- [学习笔记]背景图片小结 css三大特性
源代码参考 1. 行高(line-height) 目标理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用使用行高实现单行文字垂直居中能会测量行高 2. CS ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录文章目录 CSS学习笔记 #20201119 目录引言选择器权值样式引言 CSS能搭配HTML文档,将网页繁杂的样式信息从HTML文档中相对独 ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...

【温故知新】CSS学习笔记（背景）

CSS背景

【温故知新】CSS学习笔记（背景）相关推荐

最新文章

热门文章