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

背景属性

  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-帮助文档的说明

  2. Centos7——docker持久化存储和卷间状态共享(笔记)

    docker持久化存储和卷间状态共享(笔记)  本章介绍 存储卷的介绍 存储卷的两种类型 宿主机好额容器之间如何共享数据 容器之间如何共享数据 存储卷的声明周期 存储卷之间的数据管理和控制模式 就像在 ...

  3. dispatchEvent 自定义触发事件，常用于自定义鼠标事件或点击事件

    自定义事件的触发又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器. 1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEve ...

  4. （转）window.open和window.showModalDialog的区别

    window.open和window.showModalDialog区别: 1.都是在IE上打开新窗口,只不过前者是非阻塞式,也可以说非模态窗口.而后者是阻塞式模态窗口.阻塞或者模态窗口,只有你把当前 ...

  5. 文件操作：fseek()

    int fseek(FILE *stream, long offset, int fromwhere); fseek 用于二进制方式打开的文件,移动文件读写指针位置.   int fseek( FIL ...

  6. 暑假集训 div1 B Derangement 交换数字 思维死角

    B. Derangement time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  7. win10 exe如何添加或禁用开机自启动项

    一.添加开机自启动 1,先打开存放自启动软件文件的文件夹 方法①:在文件搜索框中输入或粘贴以下地址: C:\ProgramData\Microsoft\Windows\Start Menu\Progr ...

  8. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  9. python学习之路（4）

    使用list和tuple Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >& ...

  10. 第六周&实验四

    二.实验的内容 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:radius表示圆的半径. 2.圆类Circle的方法成员: Circle():构造方法,将半径置0 Cir ...