HTML 学习笔记 CSS样式（背景）

时间：2022-09-04 22:03:45

背景色

可以使用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属性对应的值 和 他们的作用

HTML 学习笔记 CSS样式（背景）

background-attachment属性对应的值 和 他们的作用

HTML 学习笔记 CSS样式（背景）

HTML 学习笔记 CSS样式（背景）的更多相关文章

  1. 前端学习笔记--CSS样式--背景和超链接

    1.背景 2.超链接: 举例:

  2. HTML 学习笔记 CSS样式（边框）

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  3. HTML 学习笔记 CSS样式（框模型）

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  4. HTML 学习笔记 CSS样式（文本）

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

  5. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  6. HTML 学习笔记 CSS样式（链接）

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  7. HTML 学习笔记 CSS样式（字体）

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  8. HTML 学习笔记 CSS样式（简介和语法）

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  9. 学习笔记 css样式

    大小 width:宽度  height:高度 背景 background-color  背景色   background-image  背景图片     background-repeat  背景平铺 ...

随机推荐

  1. nyoj 1022 最少步数【优先队列&plus;广搜】

    最少步数 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...

  2. Linux常用目录结构

    此文引用自51CTO博客,博主snail_hf,原文地址<Linux系统目录详解(全而易懂)> 目录结构 / 根目录,处于Linux系统树形结构的最顶端,它是Linux文件系统的入口,所有 ...

  3. java面试之谈

    半个多月的找工作时间,不是在去面试路上,就是在面试中,经历了大概有近10家的面试,虽然很多家都是一回了无音讯,对自己收获还是有的,至少让自己认识到了自身基础不牢固和技术知识面的狭隘.之前从事的工作主要 ...

  4. Fiddler系列教程1：初识Http协议抓包工具

    1. Fiddler简介 Fiddler是用一款使用C#编写的http协议调试代理工具.它支持众多的http调试任务,能够记录并检查所有你的电脑和互联网之间的http通讯,可以设置断点,查看所有的“进 ...

  5. php登陆界面刷新验证码 javascript 的写法

    <script type="text/javascript"> function refreshVerify(){ var imgId = document.getEl ...

  6. Select 、Poll 和 Epoll

    作用 Epoll 和 Select 的作用都是为了多I/O同步复用的问题,利用Epoll.Poll或Select函数指定内核监听多个I/O的读.写.异常事件,避免每一个I/O都指定一个处理线程,导致开 ...

  7. 【翻译】Android多线程下安全访问数据库

    为了记录如何线程安全地访问你的Android数据库实例,我写下了这篇小小札记.文章中引用的项目代码请点击这里       假设你已编写了自己的 SQLiteOpenHelper. publicclas ...

  8. Paper Reading - Learning to Evaluate Image Captioning &lpar; CVPR 2018 &rpar; &starf;

    Link of the Paper: https://arxiv.org/abs/1806.06422 Innovations: The authors propose a novel learnin ...

  9. Venom的简单使用

    工具地址:https://github.com/r00t-3xp10it/venom 打开到venom目录,输入./venom.sh 打开程序 按回车键继续 这里有很多的模块,要用哪个模块就输入它的编 ...

  10. c&num; 获取毫秒值，时间戳

    获取时间戳(秒) (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000 获取时间戳(毫秒) (DateTime. ...

相关文章