代码是敲出来的，建议一个一个过一遍

背景属性

  1. 背景颜色
  •   background-color  背景颜色
    
  默认值是transparent(透明的)

示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS基本样式</title>

    <style>

        body{

            height: 1000px;

            /*背景颜色   默认为透明  transparent*/

            /*颜色的取值：

            1.关键字：red、blue等

            2.16进制：#000000、#cccccc、#ff0000等

            3.rgb(0,0,0)

            4.rgba(0,0,0,.5)

            */

            background-color: red;

            background-color: #ff0000;

            background-color: rgb(255,0,0);

            background-color: rgba(255,0,0,.5);

        }

    </style>

</head>

<body>

<h1>背景属性</h1>

</body>

</html>

背景图片

  •   background-image  背景图片
    
      默认值是none(没有图片)
    
  元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
    
  通过url使用绝对或相对地址指定图片
    
  background-image: url("images/img.jpg");
    
  1.绝对路径：文件在网络或本地的绝对地址，从盘符开始	C:\Users\Administrator\Desktop\a.jpg
    
  2.相对路径：相对于你当前目录，同一等级直接写图片名称即可，在下一级，用\查找，在上一级，用../查找。一般不使用绝对地址。

示例代码

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>背景属性</title>

    <style>

        body{

            height: 1000px;

            /*背景颜色   默认为透明  transparent*/

            background-color: red;

            /*background-color: #ff0000;*/

            /*background-color: rgb(255,0,0);*/

            /*background-color: rgba(255,0,0,.5);*/

            /*背景图片 默认水平垂直平铺*/

            /*background-image: url("images/pic2.jpeg");*/

            /*背景图片平铺*/

            /*background-repeat: no-repeat;*/

            /*background-repeat: repeat-x;*/

            /*background-repeat: repeat-y;*/

            /*背景图片的大小*/

            /*background-size:1000px ;*/

            /*background-size: 100% 100%;*/

            /*背景图片固定*/

            /*background-attachment:fixed ;*/

            background:red  url("images/pic2.jpeg") no-repeat fixed ;

            background-size: 100% 100%;

        }

        .box{

            width: 800px;

            height: 600px;

            /*background-color: rgba(255,255,255,.5);

            background-image: url("images/pic1.jpg");

            background-repeat: no-repeat;*/

            /*background-size: contain;*/

            background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;

            /*背景图片定位*/

            /*background-position: x y;*/

            /*当只有水平方向，垂直方向默认居中*/

            /*background-position: 30px 30px;*/

            /*background-position: 30px;*/

            /*background-position: right bottom;*/

            /*background-position: center;*/

            /*简写为*/

            /*background：颜色 图片 平铺 大小  定位 固定;*/

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

CSS基本样式-背景属性的更多相关文章

  1. CSS 常用样式 – 背景属性

    一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰 加载区域:在 border 及以内加载背景颜色 属性值:颜色名.颜色值 & ...

  2. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  3. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  4. css学习_css背景属性及其应用

    css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果

  5. css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

  6. CSS代码示例-背景属性(background)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css里的背景属性有哪些，如何去使用哪些属性

    分类:纯色背景    背景图像 1.背景颜色 background-color : 任意合法的颜色 和 transparent 2.背景图像 background-image : url(想要加载的图 ...

  8. [1.1W字] 复习: CSS 9个背景属性&6种渐变函数, 学会可以手写实现AI中强大的"任意渐变"! #Archives009

    Title/ CSS Background&Gradient完全指南 #Archives009 序: 关于 background 属性, 了解点CSS的人总会知道个大概. 但是你肯定多半还有点 ...

  9. CSS学习笔记-背景属性

    一.背景尺寸属性:    1.含义:        背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式:        1.1具体像素:             backgro ...

随机推荐

  1. qt5---布局

    QHBoxLayout  水平布局: Header:   #include <QHBoxLayout> qmake:  QT += widgets Inherits:QBoxLayout ...

  2. SQL Server判断表中某字段是否存在【转】

    --比如说要判断表A中的字段C是否存在两个方法: 一, IF EXISTS ( FROM SYSOBJECTS T1 INNER JOIN SYSCOLUMNS T2 ON T1.ID=T2.ID W ...

  3. electron+react项目改为typescript

    1.添加typescript依赖 yarn add typescript 2.修改tsconfig.json "isolatedModules": true => " ...

  4. cordova打包项目下载gradle失败

    在使用cordova打包项目的时候有时会因为网络环境原因导致下载gradle失败的情况,个人找到两种解决方案. 方案一: 根据报错的提示选择要下载的gradle去浏览器中下载,然后将gradle压缩包 ...

  5. extern、static

    1. 基本解释:extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义.此外extern也可用来进行链接指定. 也就是说exter ...

  6. “编程小白学python”阅读笔记

    今天在豆瓣搜索“python”关键字,搜到一本知乎周刊,读来觉得不错 编程小白学python ,作者@萧井陌, @Badger 书中提到的很多书,第一次看惊呆了,记录下来,希望每周回看此博文,坚持学习 ...

  7. RESTful规范与django编写restful接口

    一.什么是RESTful规范 ①REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” ②REST从资 ...

  8. R_Studio(聚类)针对iris数据比较几种聚类方法优劣

    聚类分析 百度百科:传送门 聚类分析指将物理或抽象对象的集合分组为由类似的对象组成的多个类的分析过程 聚类与分类的不同在于,聚类所要求划分的类是未知的 聚类分析是一种探索性的分析,在分类的过程中,人们 ...

  9. R_Studio(学生成绩)对数值型数据进行统计量分析

    对“Gary.csv”中的成绩数据进行统计量分析 基础数据分析 均值 中位数 极差   标准差   变异系数 1/4分位数 3/4分位数 四分位间距... ...分析 setwd('D:\\data' ...

  10. Android学习_7/24

    一.           活动的生命周期 1.        活动状态 运行:位于返回栈栈顶 暂停:不在栈顶,但仍可见 停止:不在栈顶,完全不可见 销毁:从栈中移除 2.        活动的生存期 ...