测开之路九十二:css之背景色和背景
引用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之背景色和背景的更多相关文章
- 测开之路九十:css的引用方式
第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...
- 测开之路九十六:css进阶之元素显示和可见性
元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...
- 测开之路九十五:css进阶之光标和溢出内容处理
光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...
- 测开之路九十四:css之盒子模型
盒子模型 为了演示方便,把内容放到盒子里面 引用css 演示内容 外边距: 4个方向分开写 简写为一条指令,顺序为上右下左 简写为一条指令,第一个值为上下,第二个值为左右 简写为一条指令,只有一个值时 ...
- 测开之路一百二十三:快速搭建python虚拟环境
前提:已装好python3.4+且环境可正常运行 一:手动搭建: 准备好一个工作目录 管理员运行cmd,进入到准备的目录里面 执行命令:python -m venv 虚拟环境名 激活虚拟环境(在ven ...
- 测开之路一百二十九:jinja2模板语法
flask用的是jinja2模板,有自己特定的语法 形参: 在html里面留占位参数: {{ 参数名 }},后端传值时,参数名=参数值 <!DOCTYPE html><html la ...
- 测开之路一百二十八:flask之重定向和404
a.b两个视图,分别返回a的页面和b的页面 重定向:redirect 重定向到路由:请求/a/时,重定向到/b/ 重定向到视图函数:url_for(“函数名“),访问/a/时,重定向到函数b() 主动 ...
- 测开之路一百二十七:flask之构造response对象
可以使用flask.make_response构造自定义响应信息 构造一个响应信息为文本,状态码为404 响应 响应数据为json,状态码为200 返回html # coding:utf-8from ...
- 测开之路一百二十六:flask之获取request请求数据
可以根据flask的request对象获取所有的请求信息 path = request.path # 获取请求地址method = request.method # 获取请求方法ip = reques ...
随机推荐
- C++泛型程序设计---算法和提升
算法和提升 算法:所谓算法就是一个求解问题的过程或公式,即,通过一个有穷的计算序列生成结果. 函数模板就是普通函数的泛化:它能对多种数据类型执行动作,并且能用以参数方式传递来的各种操作实现要执行的工作 ...
- 基于maven的javaweb项目模块化开发
转自:https://my.oschina.net/kingfire/blog/273381 基于maven的javaweb项目模块化开发 引言 考虑团队拥有多个类似项目的情况,比如一些功能差异不大的 ...
- gperftools尝试
最近在找windows下比较好用的函数时间统计的库,听同事说gperftools是跨平台的,就下载下来尝试了一把.发现它确实实现了windows上可以调用的dll库文件(tcmalloc_minima ...
- 【NOIP2016提高A组模拟8.14】疯狂的火神
题目 火神为了检验zone的力量,他决定单挑n个人. 由于火神训练时间有限,最多只有t分钟,所以他可以选择一部分人来单挑,由于有丽子的帮助,他得到了每个人特定的价值,每个人的价值由一个三元组(a,b, ...
- NOIP模拟赛(by hzwer) T1 小奇挖矿
[题目背景] 小奇要开采一些矿物,它驾驶着一台带有钻头(初始能力值 w)的飞船,按既定 路线依次飞过喵星系的 n 个星球. [问题描述] 星球分为 2 类:资源型和维修型. 1. 资源型:含矿物质量 ...
- 【leetcode】1144. Decrease Elements To Make Array Zigzag
题目如下: Given an array nums of integers, a move consists of choosing any element and decreasing it by ...
- ES6数据结构Set、Map
一.Set数据结构 Set是无序的不可重复的多个value的集合体,Set结构是类似于数组结构,但是Set中的值都不能重复 常用的属性和方法 size:返回set实例的成员总数 add():添加某个值 ...
- PHP入门培训教程 PHP 数据类型
PHP 支持八种原始类型(type),下面兄弟连PHP培训 小编来给大家列出:. 四种标量类型: string(字符串) integer(整型) float(浮点型,也作 double ) boole ...
- 大文件上传-大视频上传,T级别的,求解决方案
第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname = ...
- 实用工具/API
实用工具/API PNG图片无损压缩 在线给图片加水印 随机密码生成 随机头像生成 微博一键清理工具 CSS压缩 在线工具 免费虚拟主机 技术摘要 https://github.com/biezhi/ ...