CSS学习笔记11 CSS背景
background-color:背景色
前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色
p {background-color: gray;}
如果想要元素的背景色向外延伸,则只需增加内边距即可
background-color可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素。
注意:background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
background-image:背景图像
除了可以为元素设置背景色之外,还可以用background-image属性为元素设置背景图像,其默认值是 none,表示元素背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(img/a.jpg);}
通常情况下背景应用于 body 元素。
注意:同background-color一样,background-image 也不能继承,事实上,所有背景属性都不能继承。背景图片会盖住背景颜色。也就是说背景图片的优先级要高于背景色。
background-repeat:背景重复
上面中的例子中,我们看到图片铺满了整个屏幕,如果需要设置是否需要平铺以及平铺的方向,可以使用background-repeat属性
属性值 |
效果 |
repeat |
水平垂直方向上都平铺 |
repeat-x |
水平方向上平铺 |
repeat-y |
垂直方向上平铺 |
no-repeat |
不平铺 |
background-position:背景定位
默认情况下,背景图片的位置的在元素的左上角,这时可以利用 background-position 属性改变图像在背景中的位置。
background-position可能的值
background-attachment:背景关联
scroll: 默认值,背景图像会随着页面其余部分的滚动而移动。
fixed:固定显示,相对于body固定。一般只用于body的背景设置。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS背景</title>
6 <style type="text/css">
7 body { 8 background-image: url(img/a.jpg);
9 background-repeat: no-repeat;
10 background-attachment: fixed;
11 }
12 </style>
13 </head>
14 <body>
15 <p>图像不会随页面的其余部分滚动。</p>
16 <p>图像不会随页面的其余部分滚动。</p>
17 ...
18 <p>图像不会随页面的其余部分滚动。</p>
19 </body>
20 </html>
属性合写
可以将上面讲到的属性用background属性进行合写,通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background合写的顺序: 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。如:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS属性合写</title>
6 <style type="text/css">
7 body { 8 background: yellow url(img/a.jpg) no-repeat scroll center top;
9 }
10 </style>
11 </head>
12 <body>
13 <p>段落1</p>
14 <p>段落2</p>
15 ...
16 <p>段落20</p>
17 </body>
18 </html>
CSS学习笔记11 CSS背景相关推荐
- 超细的CSS学习笔记(CSS详解)
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录 一.CSS介绍 1.CS ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
- HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
最新文章
- 《OpenCV3编程入门》学习笔记9 直方图与匹配(三)直方图对比
- 微信小程序获取openid和session_key并且把openid存入数据库
- java.io与网络通信
- OpenAI的GPT-3花费了1200万美元,现在放出商用API,人人皆可拿来自动生成文本、编写代码...
- Linux文件系统只读Read-only file system
- hub设备_HUB选择困难症?从这里解决
- python 字符串替换_Python,字符串。替换()和\n
- Lesson 1#03-Python安装与Hello Python World
- SpringBoot 基础拦截器
- mysql5.1修改登陆密码_mysql 5.1版本修改密码及远程登录mysql数据库的方法
- linux用vfork创建进程,[Linux进程]使用vfork创建子进程并且执行命令
- 70打印位置调整_闵行公司做账发票打印不全该如何调整?
- 郭新华 php,PHP常驻进程编程需知 郭新华 PHPCON2019
- php多表条件查询,php如何实现多表查询
- 有没有轻便又好用的CRM管理应用?
- python excel图表 导出word模板_使用python将Excel数据填充Word模板并生成Word
- 论文翻译之Enriched Feature Guided Refinement Network for Object Detection
- Python 对Excel数据可视化
- 多项目同时进行如何做好进度管理?
- 在德国注册商标的两种途径
热门文章
- 【Bootstrap】 框架 栅格布局系统设计原理
- 不重复int数组里找不存在的值
- 30岁前不要在乎的29件事(转载)
- 使用Google Test的一个简单例子
- linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)
- 二值形态学操作、图像的边缘检测、图像编码
- 最长有序子序列—动态规划算法
- 让程序结果在屏幕上暂停一段时间
- android关机位置定位,Android5.0关机充电动画位置
- t oracle删除吗,Oracle 11g 手工建库与删库