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

背景属性

  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. python---wav音频

    import pyaudio #导入库 import wave #导入wav音频库 import sys from PyQt5.QtWidgets import QApplication, QWidg ...

  2. re.compile 函数

    re.compile 函数 compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 search() 这两个函数使用. 语法格式为: re.com ...

  3. BZOJ 2434: [Noi2011]阿狸的打字机 AC自动机+fail树+线段树

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...

  4. no matches for kind "ReplicaSet" in version "extensions/v1beta1"

    原来的yaml的资源清单为 apiVersion: extensions/v1beta1 kind: ReplicaSet metadata: name: frontend spec: replica ...

  5. TCP如何保证可靠传输

    TCP 协议如何保证可靠传输   一.综述 1.确认和重传:接收方收到报文就会确认,发送方发送一段时间后没有收到确认就重传. 2.数据校验 3.数据合理分片和排序: UDP:IP数据报大于1500字节 ...

  6. sqli-labs(46)

    0X01首先我们先来看一下源码 发现查询语句变成了 order by  参数也变成了 sort 看看是什么样的 ()首先看看本关sql语句 $sql = "SELECT * FROM use ...

  7. 使用R进行方差分析

    eff=c(58.2,52.6,56.2,41.2,65.3,60.8,49.1,42.8,54.1,50.5,51.6,48.4,60.1,58.3,70.9,73.2,39.2,40.7,75.8 ...

  8. idea maven sync Cannot resolve xxx 的解决方案

    经常会出现这种奇葩情况,提示找不到包 其实是因为网络波动或者突然断掉,导致包更新出现问题 直接去maven的仓库目录 找到不能找到的包 删掉相关目录 然后重新更新maven就行了 比如 直接去仓库目录 ...

  9. java特殊运算符

    按位运算符 定义:按位运算符是来操作整数基本数据类型中的单个“比特”(bit),即二进制位,位运算符会对两个参数中对应的位执行布尔代数运算,并最终生成一个结果. 分类:与(&).或(|).异或 ...

  10. qmake生成VS的vcproj/sln工程文件

    qmake 生成的vs工程与环境变量中的 qmakespec相关,可以有两种方法: 1.默认情况下,即环境变量qmakespec为你装的qt for vs的版本,默认生成的为该版本的vs工程,如,你装 ...