前端CSS学习-Background背景相关
在CSS中 背景属性用于定义HTML元素的背景。
background主要设置一下五个属性:
- background-color // 设置元素的背景颜色。
- background-image // 把图像设置为背景。
- background-repeat // 设置背景图像是否及如何重复。
- background-attachment // 背景图像是否固定或者随着页面的其余部分滚动。
- background-position // 设置背景图像的起始位置。
1. background-color // 背景颜色
这个属性定义了元素的背景颜色, 它有三种定义方式:
- 十六进制 - 如:"#ff0000"
- RGB - 如:"rgb(255,0,0)"
- 颜色名称 - 如:"red"
给文本设置background-color可以实现文本高亮效果.
2. background-image // 背景图像
这个属性定义了元素的背景图像, 使用方法
- 绝对路径写法:
- background-image:url("/img/3.jpg");
- 或者:
- background-image:url(/img/3.jpg);
- 相对路径写法:
- background-image:url(“../img/3.jpg”);
- 或者:
- background-image:url(../img/3.jpg);
当然也可以设置多个图片, 注意要用逗号来分隔: 比如
background-image
:
url
(
'res/1.jpg'
),
url
(
'res/2.jpg'
);
1.jpg会默认显示在2.jpg的上方
3. background-repeat // 设置图像如何平铺
默认的情况下, image的渲染方式是在页面的水平或者垂直方向平铺, 但是有时候这样会显得不协调, 这个时候就需要来通过设置
background-repeat 来设置背景图像的平铺方式.
我们可以这样设置.
background-repeat:repeat-x; // 在x轴的方向上平铺 background-repeat:repeat-y; // 在y轴发方向上平铺 background-repeat:repeat-x repeat-y; // 在x 和 y 轴方向上平铺 background-repeat:space; // 均匀的平铺背景图片,不会被裁剪 不会拉伸图片 background-repeat:round; // 水平和垂直平铺背景图片,拉伸图片以尽可能的填充背景,不会被裁剪 background-repeat:no-repeat; // 不进行平铺
4. background-position // 设置图像位置
图像默认显示的位置是top left即左上角, 这样满足不了我们设计的预期, 这时就需要来设置 background-position属性来设置图像的初始位置了.
怎么使用 就是 top right left bottom center 这样来组合设置, 如果只设置了某一个属性那么其它的默认是center.
这个属性还有两种设置方式:
1) 通过%来设置
background-position: 20% 30%; // 距离视图左边20%, 上面30%;
如果只是设置了一个比如:
bcakground-position: 20%;
那么就是距离左边20%; 而在水平方向上默认为居中显示.
2)通过px来设置
background-position: 200px 300px; // 距离视图左边界200个像素单位, 距离视图上边界300个像素单位
如果只是设置了一个比如:
bcakground-position: 200px;
那么就是距离左边200个像素单位; 而在水平方向上默认为居中显示.
当然也可以这样来设置:
background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px,垂直方向与底部边缘相距20px
5. background-attachment // 设置图像是否随着页面滚动.
background-attachment: scroll // 背景图片随页面的其余部分滚动 默认设置
background-attachment:fixed // 背景图像是固定的
background-attachment:inherit // 指定background-attachment的设置应该从父元素继承
6. background-size :设置背景图片的大小
默认值 auto auto // 背景图片的原始大小
示例:
background-size:100px; // 宽度为100px 高度为原始大小
background-size:100px 200px; // 宽度为100px 高度为200px
background-size:100px 50%; // 宽度为100px 高度为页面大小的50%
background-size:100% 100%; // 宽和高均为100% 占满整个视图
前端CSS学习-Background背景相关的更多相关文章
- 47.前端css学习、登陆页面的制作
CSS: 有了CSS,html中大部分表现样式的标签就可以不用了 html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁 CSS的引入方式: 内联式引入:直接赋予标签styl ...
- 前端css学习记录
参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...
- 前端Css学习
CSS 称为层叠样式表 css样式引入方式 第一种 head标签中引入 <style> /* 选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ /* css注释 ...
- 前端CSS学习笔记
一 CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(超文本标记语言)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以 ...
- 前端html与css学习笔记总结篇(超详细)
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
随机推荐
- procotol.go 源码阅读
) return } bufferOver = buffer[i:] return } //整形转换成字节 // func IntToBytes(n int) ...
- backend_queue.go
package nsqd // BackendQueue represents the behavior for the secondary message // storage system typ ...
- Go的context的问题
Go的context的问题 2017-05-29 最近被由context引发的一个bug坑得不轻,所以反思一下Go的context的问题. context是隐式的约束,没有检测 如果我们写一个函数,比 ...
- BZOJ_1266_[AHOI2006]上学路线route_最小割
BZOJ_1266_[AHOI2006]上学路线route_最小割 Description 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信 ...
- BZOJ_1029_ [JSOI2007]建筑抢修_贪心+堆
BZOJ_1029_ [JSOI2007]建筑抢修_贪心+堆 Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是 ...
- C++ bitset用法
概念: bitset是用来存储位的(其中的元素只有两种形式) 这个类通常用来模拟一个布尔数组,但对空间分配上进行了优化:通常,每个元素只占用一个bit ,而通常char类型是它的八倍 每个位置上的位都 ...
- Charles 连接手机抓包出现Unknown,一直无法抓包的问题解决
mac电脑安装了charles并且确保已经安装成功,https抓包需要安装的相关的证书已经安装,并且手机浏览器中输入chls.pro/ssl已经将证书下载完成,但是手机与电脑相连通过点击手机应用还是无 ...
- 在Eclipse上Maven环境配置使用
1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http://maven. ...
- ajax 和jsonp 不是一码事
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- 一行代码实现数组去重(ES6)
ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...