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

背景属性

  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. SQL SERVER 2008 设置字段默认值为当前时间

    在某些情况下需要对某条记录添加上时间戳,比如用户注册,需要记录用户的注册时间,在SQL SERVER 2008中可以通过 1. 添加新字段 2. 数据类型设置为smalldatetime 3. 默认值 ...

  2. Python 操作 MySQL 数据库Ⅳ

    执行事务 事务机制可以确保数据一致性. 事务应该具有4个属性:原子性.一致性.隔离性.持久性.这四个属性通常称为ACID特性. 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中包 ...

  3. C# 常用方法——图片转base64字符串

    其他扩展方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html /// <summary> /// Image 转成 base64 / ...

  4. 如何安装 Angular CLI 并且检查 CLI 的版本

    想在系统中安装 Angular CLI ,如何进行安装并且如何检查 CLI 的版本? 可以使用命令: npm install -g @angular/cli 进行安装. 使用命令 ng version ...

  5. js 获取系统时间：年月日 星期 时分秒（动态）

    最近再写一个纯html页面,有时间和天气的数据,天气后台给接口,时间要自己获取,我就自己弄了下, <div class="basic"></div> 这是放 ...

  6. Jmeter(四）Cookie管理器

    上一节中我们用Jmeter通过接口上传了一张图片到人人网,其中请求头中的Cookie是写死的,这个Cookie其实是登录成功后服务器返回给客户端的,客户端接收到这个Cookie后保存下来,在后续向服务 ...

  7. 11.Python变量及其使用

    无论使用什么语言编程,其最终目的都是对数据进行处理.程序在编程过程中,为了处理数据更加方便,通常会将其存储在变量中. 形象地看,变量就像一个个小容器,用于“盛装”程序中的数据.除了变量,还有常量,它也 ...

  8. 191121CSS

    一.CSS 1.css选择器 css选择器的使用方法 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. Vue可自定义tab组件

    在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间.     如何 ...

  10. defineProperty和defineProperties介绍

    v-model 实现的原理 angular 是 mvc 的实现原理,ng-model 是靠脏值检测实现的 脏值检测:for 循环一个个对比 vue 靠的是数据劫持 和 发布者,订阅者模式 数据劫持:O ...