前端学习 -- Html&Css -- 背景
background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
使用background-image来设置背景图片
- 语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景图片时都会同时指定一个背景颜色。
background-repeat用于设置背景图片的重复方式。
可选值：
- repeat，默认值，背景图片会双方向重复（平铺），
- no-repeat ，背景图片不会重复，有多大就显示多大，
- repeat-x， 背景图片沿水平方向重复，
- repeat-y，背景图片沿垂直方向重复。
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量，
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
- scroll，默认值，背景图片随着窗口滚动
- fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素。
实现方式1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> body{
height: 5000px;
background: #bfa url(img/HBuilder.png) center center no-repeat fixed;
} </style>
</head>
<body>
</body>
</html>
实现方式二：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
height: 5000px;
background-color: #bfa;
background-image: url(img/HBuilder.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head> <body>
</body> </html>
效果：
前端学习 -- Html&Css -- 背景的更多相关文章
- 前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- Day4前端学习之路——背景边框列表链接和更复杂的选择器
课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性 主要内容: 背景属性 边框 列表 链接 其他选择器 选择器概览:https://www.w3school.com. ...
- 前端学习 -- Html&Css -- ie6 png 背景问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
- 前端学习笔记--CSS样式--背景和超链接
1.背景 2.超链接: 举例:
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 前端学习 之 CSS（三）
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- 前端学习 之 CSS（二）
五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...
- 前端学习 之 CSS（一）
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
随机推荐
- 【译】快速起步-JSX简介
react version: 15.5.0 快速起步-JSX简介 思考这个变量申明: const element = <h1>Hello, world!</h1>; 这个有趣的 ...
- UWP简单示例（三）：快速开发2D游戏引擎
准备 IDE:Visual Studio 图形 API:Win2D MSDN 教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面你需要考虑图形.输入和网络 以及相对独立的 ...
- Zabbix监控系统部署：配置详解
1. 全局配置 ListenPort ,监听端口 ,取值范围为1024-32767,默认端口10051 SourceIP,外发连接源地址 LogType,日志类型:单独日志文件,系统文件,控制台输出 ...
- 并行管理工具——pdsh
1. pdsh安装2. pdsh常规使用2.1 pdsh2.2 pdcp 并行管理的方式有很多种: 命令行 一般是for循环 脚本 一般是expect+ssh等自编辑脚本 工具 pssh,pdsh,m ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- 【个人博客作业II】有关代码规范问题的讨论
参考课程辅导书<构建之法>可以知道,程序的代码规范常指代码风格规范和代码设计规范两个方面,其中:代码风格规范包括(缩进,行宽,括号,断行与空白行,分行,命名,下划线,大小写,注释这几个部分 ...
- 读书笔记（chapter3）
进程管理 3.1进程 1.进程:进程就是处于执行期的程序,实际上,进程就是正在执行的程序代码的实时结果: 2.执行线程,简称线程,是进程中活动的对象(每个线程拥有独立的程序计数器.进程栈.和一组进程寄 ...
- Linux内核第四节 20135332武西垚
实验目的: 使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 实验过程: 查看系统调用列表 get pid 函数 #include <stdio.h> #include & ...
- Java web错误总结~
1.java程序中没有错,但是项目上面显示一个红叉的解决办法 错误信息: 报Description Resource Path Location Type Java compiler level d ...
- Hitchhiker 是一款开源的 Restful Api 测试工具
Hitchhiker 是一款开源的 Restful Api 测试工具 开源API测试工具 Hitchhiker v0.4更新 - 没有做不到,只有想不到 Hitchhiker 是一款开源的 Restf ...