在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. Kafka的CommitFailedException异常

    一.含义 CommitFailedException异常:位移提交失败时候抛出的异常.通常该异常被抛出时还会携带这样的一段话: Commit cannot be completed since the ...

  2. Django的ORM操作

    ORM操作 select * from tb where id > 1 # 对应关系 models.tb.objects.filter(id__gt=1) models.tb.objects.f ...

  3. random.nextInt()与Math.random()基础用法

    相关文章:关于Random(47)与randon.nextInt(100)的区别 1.来源 random.nextInt() 为 java.util.Random类中的方法: Random类中还提供各 ...

  4. 虚拟机console基础环境配置——sshd安全登陆

    1. 概述2. 配置console的登陆2.1 配置sshd服务2.2 重启sshd服务2.3 无法登陆的问题解决3. 配置密钥登陆3.1 上传公钥的方式3.2 下载密码的方式3.3 虚拟机和宿主机共 ...

  5. laravel5.5解决小程序登陆态的问题

    修改一个文件 : vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php 找到getSession()方 ...

  6. 【爆料】-《布莱顿大学毕业证书》Brighton一模一样原件

    布莱顿大学毕业证[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&am ...

  7. qtchooser

    qtchooser 的配置目录: /usr/lib/x86_64-linux-gnu/qtchooser qtchooser 的真实配置目录: /usr/share/qtchooser qtchoos ...

  8. selenium IDE工具页面介绍!

    selenium IDE工具页面,常用功能点介绍

  9. 图解:HTTP 范围请求,助力断点续传、多线程下载的核心原理

    题图:by Charles Loyer 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header) ...

  10. 接口测试心得--签名处理(Python)

    一.背景 最近负责的项目接口签名规则做了调整,第一次接触“2次认证“的方式,正好有时间,记录一下. 测试的服务A有一部分接口需要给第三方调用,这样需要对第三方有个认证,认证是由一个公共服务(API鉴权 ...