引用css

设置背景色：

背景图片

整个页面的背景图片

图片当局部背景图

也可以简写

css

/* css基本样式 */

/* 设置p标签的文字前景色、背景色 */
p{
    /*字体颜色为蓝色*/
    color: blue;
    /*背景色为黑色*/
    background-color: black;
}

/*把图片当整个页面的背景*/
body{
    /*图片的地址*/
    background-image: url("../img/timg.jpg");
    /*固定背景图，当文字过长拖动的时候，不跟随文字滚动*/
    background-attachment: fixed;
    /*不允许重复 如当图片的大小小于页面的时候*/
    background-repeat: no-repeat;
}

/* 图片当局部背景色，即背景图 */
/*背景图重复: 不允许重复 background-repeat: no-repeat;*/
/*背景图重复: 沿x轴重复  background-repeat: repeat-x;*/
/*背景图重复: 沿y轴重复  background-repeat: repeat-y;*/
/*背景图位置 左下background-position: left bottom;*/
#img{
    width: 600px;/*要放图片的框架的宽*/
    height: 600px;/*要放图片的框架的高*/
    background-color: red;/*图片的背景色*/
    border: 5px solid #000;/*边框的属性*/
    background-image: url("../img/288.png");/*图片的地址*/
    background-repeat: no-repeat;/*图片不允许重复，当图片比框架小的时候，不重复填充*/
    background-position: left bottom;/*背景图位置 左下角*/
}

#img{
    /*简写设置图片*/
    /*颜色/图片地址/是否重复/是否固定位置/水平位置/垂直位置*/
    background: #000 url("../img/288.png") no-repeat left bottom ;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <link rel="stylesheet" href="../css/css04.css">
</head>
<body>
    <p>color指定的颜色为前景色</p>
    <p>background-color指定的颜色为背景色</p>
       <p style="color: blue">
        字体显示蓝色
        此时的设置为，固定背景图，当文字过长拖动的时候，不跟随文字滚动，
        且如当图片的大小小于页面的时候，不允许重复
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto eaque facilis, id nesciunt nisi nulla provident
        quod! Accusamus architecto debitis dignissimos doloremque explicabo nobis non optio pariatur sapiente, temporibus
        vitae!</p>
    <div id="img" style="color: blue">这是图片背景图</div>
   <p id="img" style="color: blue">图片当局部背景色，即背景图</p>
</body>
</html>

测开之路九十二：css之背景色和背景的更多相关文章

  1. 测开之路九十：css的引用方式

    第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...

  2. 测开之路九十六：css进阶之元素显示和可见性

    元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...

  3. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  4. 测开之路九十四：css之盒子模型

    盒子模型 为了演示方便,把内容放到盒子里面 引用css 演示内容 外边距: 4个方向分开写 简写为一条指令,顺序为上右下左 简写为一条指令,第一个值为上下,第二个值为左右 简写为一条指令,只有一个值时 ...

  5. 测开之路一百二十三：快速搭建python虚拟环境

    前提:已装好python3.4+且环境可正常运行 一:手动搭建: 准备好一个工作目录 管理员运行cmd,进入到准备的目录里面 执行命令:python -m venv 虚拟环境名 激活虚拟环境(在ven ...

  6. 测开之路一百二十九：jinja2模板语法

    flask用的是jinja2模板,有自己特定的语法 形参: 在html里面留占位参数: {{ 参数名 }},后端传值时,参数名=参数值 <!DOCTYPE html><html la ...

  7. 测开之路一百二十八：flask之重定向和404

    a.b两个视图,分别返回a的页面和b的页面 重定向:redirect 重定向到路由:请求/a/时,重定向到/b/ 重定向到视图函数:url_for(“函数名“),访问/a/时,重定向到函数b() 主动 ...

  8. 测开之路一百二十七：flask之构造response对象

    可以使用flask.make_response构造自定义响应信息 构造一个响应信息为文本,状态码为404 响应 响应数据为json,状态码为200 返回html # coding:utf-8from ...

  9. 测开之路一百二十六：flask之获取request请求数据

    可以根据flask的request对象获取所有的请求信息 path = request.path # 获取请求地址method = request.method # 获取请求方法ip = reques ...

随机推荐

  1. python之 yield --- “协程”

    在编程中我们经常会用到列表,以前使用列表时需要声明和初始化,在数据量比较大的时候也需要把列表完整生产出来,例如要存放1000给数据,需要准备长度1000的列表,这样计算机就需要准备内存放置这个列表,在 ...

  2. Ubuntu 14.04 下的MAC OS X 主题安装

    Ubuntu 14.04 下的MAC OS X 主题安装 安装 MAC OS X 主题会帮助你的 Ubuntu 14.04 看起来更像MAC OS X.在这里我们介绍的Macbuntu安装包包含了GT ...

  3. python生成图片验证码

    import PIL from PIL import Image from PIL import ImageDraw,ImageFont import random def get_random_co ...

  4. ztree 获取CheckBox选中节点时，不获取选中上级父节点

    //将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...

  5. Azure IoT 技术研究系列4

    上两篇博文中,我们介绍了将设备注册到Azure IoT Hub,设备到云.云到设备之间的通信: Azure IoT 技术研究系列2-设备注册到Azure IoT Hub Azure IoT 技术研究系 ...

  6. Mybatis入门教程之新增、更新、删除功能_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 上一节说了Mybatis的框架搭建和简单查询,这次我们来说一说用Mybatis进行基本的增删改操作: 一. 插入一条数据 ...

  7. springboot自定义异常数据

    一.源码分析 自定义异常数据之前我们先看看一下源码             上述代码意思是如果你没有提供就使用springboot提供的类     这是springboot提供的异常属性类,我们想要自 ...

  8. qt学习（一）qt三个文件函数的框架

    学到点什么, 而不是复制着什么, 每天敲着别人给的代码,苦涩得改完bug, 就这样一天天的过去, 实质上并没有学到什么, 别人的思想只是拿来借鉴, 你的思想是好是坏都是你的, 不用急着抛弃自己. 从q ...

  9. BZOJ 3319: 黑白树 并查集 + 离线 + 思维

    Description 给定一棵树,边的颜色为黑或白,初始时全部为白色.维护两个操作: 1.查询u到根路径上的第一条黑色边的标号. 2.将u到v    路径上的所有边的颜色设为黑色. Notice:这 ...

  10. POJ 2456 Aggressive cows ( 二分 && 贪心 )

    题意 : 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x1,...,xN (0 <= xi <= 1e9) ...