前端学习 -- 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 中,是为 ...
随机推荐
- bootstrap datetimepicker 格式化yyyymmdd时，无法读取yyyymmdd格式
不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...
- BugkuCTF 计算器
前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...
- 2016.3.24 OneZero站立会议
会议时间:2016.3.24 15:35-15:55 会议成员:王巍 夏一名 冉华 张敏 会议内容: 1.确立UI界面原形(见http://www.cnblogs.com/zhangminss/p/5 ...
- 个人阅读作业WEEK7 （软件工程的瀑布, 大泥球, 教堂，集市，和银弹）
一 . 关于银弹 (Silver Bullet) 银弹,被引申为解决问题的有效办法.IBM大型机之父福瑞德·布鲁克斯在1986年的论文<没有银弹>中表达了他的观点:软件工程中不存在银弹—— ...
- SQL大杂烩
DML 语句(数据操作语言)Insert.Update. Delete.Merge DDL 语句(数据定义语言)Create.Alter. Drop.Truncate DCL 语句(数据控制语言)Gr ...
- Sql语句报ORA-01795: 列表中的最大表达式数为 1000
错误信息:java.sql.SQLException: ORA-01795: 列表中的最大表达式数为 1000,错误信息如下: serviceid是:work -------------other W ...
- 【Alpha发布】网站已经正式发布！
Alpha版本发布说明 一.功能介绍 本团队所做的物理实验网站是以生成物理实验报告为基础功能的网站.Alpha版本具有的功能大体如下: Figure 1首页 1. 注册登录功能 用户可以通过在注册页通 ...
- centos7 服务操作命令
systemctl list-unit-files --type service --all 操作防火墙: https://www.jianshu.com/p/411274f96492 操作VNC: ...
- Linux命令博客目录
Linux 目录结构 Linux命令(一) pwd ,cd Linux命令(二) 复制文件 cp Linux命令(三) 移动文件 mv Linux命令(四)删除文件 rm Linux终端常用快捷键 L ...
- docker 下运行 postgresql 的命令
postgresql docker下启动的命令 docker run --name pgdata -p : -e POSTGRES_PASSWORD=Test6530 -v /pgdata:/var/ ...