HTML 学习笔记 CSS样式(背景)
背景色
可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值。
可以使用background-image属性来喂元素设置背景图片。
背景重复
如果需要在页面上对背景图进行平铺,可以使用background-repeat属性。
属性值repeat导致图像在水平垂直方向上都平铺,repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。。
默认的 背景图将从一个元素的左上角开始 。
背景定位。
可以利用background-position 属性来改变图像在背景中的位置。
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像防治关键字最容易理解,其作用如其名称所表明的 例如 top right 使图像防治在元素那边句区的右上角
根据规范 关键字可以以任何顺序出现 只要保证不超过两个关键字 一个对应水平方向 一个对应垂直方向。
如果只出现一个关键字 则认为另一个关键字是center
也可以使用百分数值来定义position
例如 background-position: 50%,50%;
这会导致图像适当放置 其中心与其元素的中心对齐 换句话说 百分数值同时应用于元素和图像。也就是说 图像中描述为50% 50%的点 与元素中描述为50% 50%的点(中心点)对齐
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。
例子
1:设置背景颜色
Demo.css body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
h2 {
background-color: rgb(250,0,250);
}
p.no2{
background-color: gray; padding: 20px;
}
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<link rel="stylesheet" type="text/css" href="CSS/demo.css" />
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距</p>
</body>
</html>
2:设置背景图片
body {
/*background-color: yellow;*/
background-image: url(../img/HBuilder.png);
/*背景图不平铺*/
/*background-repeat:no-repeat ;*/
/*x方向平铺图片 repeat-y 垂直方向平铺背景图*/
background-repeat: repeat-x;
/*background-position:left top;*/
/*设置背景图的位置*/
background-position: 10px 10px;
/*背景图不随视图的滚动而滚动*/
background-attachment:fixed ;
}
background-repeat属性对应的值 和 他们的作用
background-attachment属性对应的值 和 他们的作用
HTML 学习笔记 CSS样式(背景)的更多相关文章
- 前端学习笔记--CSS样式--背景和超链接
1.背景 2.超链接: 举例:
- HTML 学习笔记 CSS样式(边框)
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- HTML 学习笔记 CSS样式(框模型)
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式(文本)
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- HTML 学习笔记 CSS样式(链接)
我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...
- HTML 学习笔记 CSS样式(字体)
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
- HTML 学习笔记 CSS样式(简介和语法)
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
- 学习笔记 css样式
大小 width:宽度 height:高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...
随机推荐
- iOS关于CoreAnimation动画知识总结
一:UIKit动画 在介绍CoreAnimation动画前先简单介绍一下UIKit动画,大部分简单的动画都可以使用UIKit动画实现,如果想实现更复杂的效果,则需要使用Core Animation了: ...
- Android Small插件化框架源码分析
Android Small插件化框架源码分析 目录 概述 Small如何使用 插件加载流程 待改进的地方 一.概述 Small是一个写得非常简洁的插件化框架,工程源码位置:https://github ...
- 大数据计算平台Spark内核解读
1.Spark介绍 Spark是起源于美国加州大学伯克利分校AMPLab的大数据计算平台,在2010年开源,目前是Apache软件基金会的顶级项目.随着 Spark在大数据计算领域的暂露头角,越来越多 ...
- google不能访问的根本解决方法
最近中国的防火墙又调皮了.直接出现404了.以前通过IP访问的方式也失效了.难道这种问题能难倒我们这些做技术的IT工程师么?! 经过我的查询,我发现还是有大神在研究这块的.大神针对开发经常访问的网站做 ...
- stringstream操纵string小总结
1 split字符串 之前在用C#写代码的时候,用过split函数,可以把一个字符串根据某个分隔符分成若干个字符串数组.在用C++操纵字符串的时候,我一直使用很笨的遍历的方法.为此,我问候过很多次C+ ...
- 迪杰斯特拉算法——PAT 1003
本文主要是将我对于我对于迪杰斯特拉算法的理解写出来,同时通过例题来希望能够加深对于算法的理解,其中有错误的地方希望大家指正. 迪杰斯特拉算法 我将这个算法理解成一个局部到整体的算法,这个方法确实越研究 ...
- 在unix系统下的 .o文件 .a文件 .so文件说明和相互关系
.o文件 .o文件就是对象文件,包含编译好的可执行代码,当程序执行时,被链接库链接调用[相当于windows里的obj文件] .a文件unix中的静态链接库,包含多个需要包含的.o文件,主要特点是在 ...
- 将long数字序列化为json时,转换为字符串
由于javascript中所有数字都是64位的浮点数,所以整数只能精确的表示53bit长的数字. 在从server得到的json数据中,有ID是长整数类型,在客户端根据此ID生成的link也是不准确的 ...
- 看美剧英文字幕学英语的利器——“深蓝英文字幕助手”简介
我从初中开始基本上就是一个英语很烂的人,数理化再好有什么用,工作了,结果发现数理化都没啥用,最有用的还是当年学的最烂的英语.于是在2011年年底开始了学习英语的课程,在学习的过程中,外教经常会放英剧美 ...
- .NET项目开发—浅谈面向接口编程、可测试性、单元测试、迭代重构(项目小结)
阅读目录: 1.开篇介绍 2.迭代测试.重构(强制性面向接口编程,要求代码具有可测试性) 2.1.面向接口编程的两个设计误区 2.1.1.接口的依赖倒置 2.1.2.接口对实体的抽象 2.2.迭代单元 ...