前端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 ...
随机推荐
- Kafka的CommitFailedException异常
一.含义 CommitFailedException异常:位移提交失败时候抛出的异常.通常该异常被抛出时还会携带这样的一段话: Commit cannot be completed since the ...
- Django的ORM操作
ORM操作 select * from tb where id > 1 # 对应关系 models.tb.objects.filter(id__gt=1) models.tb.objects.f ...
- random.nextInt()与Math.random()基础用法
相关文章:关于Random(47)与randon.nextInt(100)的区别 1.来源 random.nextInt() 为 java.util.Random类中的方法: Random类中还提供各 ...
- 虚拟机console基础环境配置——sshd安全登陆
1. 概述2. 配置console的登陆2.1 配置sshd服务2.2 重启sshd服务2.3 无法登陆的问题解决3. 配置密钥登陆3.1 上传公钥的方式3.2 下载密码的方式3.3 虚拟机和宿主机共 ...
- laravel5.5解决小程序登陆态的问题
修改一个文件 : vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php 找到getSession()方 ...
- 【爆料】-《布莱顿大学毕业证书》Brighton一模一样原件
布莱顿大学毕业证[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&am ...
- qtchooser
qtchooser 的配置目录: /usr/lib/x86_64-linux-gnu/qtchooser qtchooser 的真实配置目录: /usr/share/qtchooser qtchoos ...
- selenium IDE工具页面介绍!
selenium IDE工具页面,常用功能点介绍
- 图解:HTTP 范围请求,助力断点续传、多线程下载的核心原理
题图:by Charles Loyer 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header) ...
- 接口测试心得--签名处理(Python)
一.背景 最近负责的项目接口签名规则做了调整,第一次接触“2次认证“的方式,正好有时间,记录一下. 测试的服务A有一部分接口需要给第三方调用,这样需要对第三方有个认证,认证是由一个公共服务(API鉴权 ...