在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背景相关的更多相关文章

  1. 47.前端css学习、登陆页面的制作

    CSS: 有了CSS,html中大部分表现样式的标签就可以不用了 html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁 CSS的引入方式: 内联式引入:直接赋予标签styl ...

  2. 前端css学习记录

    参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...

  3. 前端Css学习

    CSS 称为层叠样式表 css样式引入方式 第一种 head标签中引入 <style> /* 选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ /* css注释 ...

  4. 前端CSS学习笔记

    一 CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(超文本标记语言)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以 ...

  5. 前端html与css学习笔记总结篇(超详细)

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  6. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  7. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  8. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  9. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

随机推荐

  1. procotol.go 源码阅读

    )         return     }     bufferOver = buffer[i:]     return } //整形转换成字节 // func IntToBytes(n int) ...

  2. backend_queue.go

    package nsqd // BackendQueue represents the behavior for the secondary message // storage system typ ...

  3. Go的context的问题

    Go的context的问题 2017-05-29 最近被由context引发的一个bug坑得不轻,所以反思一下Go的context的问题. context是隐式的约束,没有检测 如果我们写一个函数,比 ...

  4. BZOJ_1266_[AHOI2006]上学路线route_最小割

    BZOJ_1266_[AHOI2006]上学路线route_最小割 Description 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信 ...

  5. BZOJ_1029_ [JSOI2007]建筑抢修_贪心+堆

    BZOJ_1029_ [JSOI2007]建筑抢修_贪心+堆 Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是 ...

  6. C++ bitset用法

    概念: bitset是用来存储位的(其中的元素只有两种形式) 这个类通常用来模拟一个布尔数组,但对空间分配上进行了优化:通常,每个元素只占用一个bit ,而通常char类型是它的八倍 每个位置上的位都 ...

  7. Charles 连接手机抓包出现Unknown,一直无法抓包的问题解决

    mac电脑安装了charles并且确保已经安装成功,https抓包需要安装的相关的证书已经安装,并且手机浏览器中输入chls.pro/ssl已经将证书下载完成,但是手机与电脑相连通过点击手机应用还是无 ...

  8. 在Eclipse上Maven环境配置使用

    1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http://maven. ...

  9. ajax 和jsonp 不是一码事

    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...

  10. 一行代码实现数组去重(ES6)

    ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...