css详解background八大属性及其含义
background(背景)
以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin)、元素边框(border)、元素内边距(padding)和元素内容(content) 4部分组成,不过这只是从2D的视角来看盒模型的组成,而今天笔者将阐述如何从3D的视角看待盒模型的组成。
从2D视角看盒模型示意图:
从3D视角看盒模型示意图:
从3D视角看盒模型可以发现多了两个属性:background-image和background-color,而这两个属性都可以归纳到元素的background中,同时在元素的background中还有6个属性1可以影响到background-image和background-color的绘制情况,这篇博文主要是用来介绍background-image和background-color还有其余6个属性以及它们是怎样影响到浏览器对元素盒子background的绘制的。
background-color(背景颜色)
背景颜色是背景中最常用的属性,它支持的值类型有:
类型 | 示例 |
---|---|
颜色名称 | red, white, black, transparent |
16进制颜色码 | #FF0000, #FFF, #000, #00000000 |
rgb颜色值 | rgb(255, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0) |
rgba颜色值 | rgba(0, 0, 0, 0) |
hsla颜色值 | hsla(0,0%,0%,0) |
关于rgba颜色值和hsla颜色值,笔者在有趣的css—隐藏元素的7种思路中写过详细的使用示例,感兴趣的读者可以看看。
background-color(背景颜色)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>background-color(背景颜色)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;background-color: #06b7e1;}</style></head><body><div></div></body>
</html>
background-color(背景颜色)示例效果图:
background-image(背景图片)
背景图片的书写示例:
background-image: url(path);
path代表存放图片的路径,它可以是绝对路径,也可以是相对路径。
背景图片在z轴上比背景颜色更靠近用户,背景图片在完全不透明的情况下,会完全遮盖住背景颜色。
background-image(背景图片)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title> background-image(背景图片)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);}</style></head><body><div></div></body>
</html>
background-image(背景图片)示例效果图:
background-size(背景图片尺寸大小)
背景图片尺寸大小支持的值类型有:
类型 | 示例 | 含义 |
---|---|---|
百分比 | 20% 30% | 背景图片占据背景区宽度的百分之20,高度的百分之30 |
像素 | 200px 300px | 背景图片的宽度为200像素,高度为300像素 |
覆盖 | cover | 保持图片宽高比进行拉伸,使其完全占据背景区 |
包含 | contain | 保持图片宽高比进行缩放,使其恰好适合背景区 |
background-size(背景图片尺寸大小)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>background-size(背景图片尺寸大小)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;margin: 24px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);}#percentage {background-size: 20% 30%;}#pixel {background-size: 200px 300px;}#cover {background-size: cover;}#contain {background-size: contain;}</style></head><body><div id="percentage"></div><div id="pixel"></div><div id="cover"></div><div id="contain"></div></body>
</html>
background-size(背景图片尺寸大小)示例效果图:
background-repeat(背景图片重复方式)
背景图片重复方式支持的值以及含义:
值 | 含义 |
---|---|
no-repeat | 背景图片不重复 |
repeat | 默认值,背景图片在垂直和水平方向都重复 |
repeat-x | 背景图片在水平方向重复 |
repeat-y | 背景图片在垂直方向重复 |
background-repeat(背景图片重复方式)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>background-repeat(背景图片重复方式)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;margin: 24px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);background-size: 42px 32px;}</style></head><body><div style="background-repeat: no-repeat;"></div><div style="background-repeat: repeat;"></div><div style="background-repeat: repeat-x;"></div><div style="background-repeat: repeat-y;"></div></body>
</html>
background-repeat(背景图片重复方式)示例效果图:
background-position(背景图片位置)
background-position总共有5个属性,分别是top、right、bottom、left、center,这个5个属性可以单独使用,也可以两两使用。
单独使用时,默认第二个参数为center,两两使用时背景图片占据位置如下图:
background-position(背景图片位置)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>background-position(背景图片位置)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;margin: 24px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);background-size: 140px 140px;background-repeat: no-repeat;}</style></head><body><div style="background-position: top;"></div><div style="background-position: right;"></div><div style="background-position: bottom center;"></div><div style="background-position: left center;"></div></body>
</html>
background-position(背景图片位置)示例效果图:
background-attachment(背景图片是否固定)
背景图片是否固定支持的值以及含义:
值 | 含义 |
---|---|
scroll | 默认值,背景图片不固定,在视窗内滚动元素时,背景图片跟随元素一起滚动 |
fixed | 背景图片固定,在视窗内滚动元素时,背景图片不跟随元素一起滚动 |
背景图片不固定示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>背景图片不固定示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 100%;height: 2000px;margin: 24px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);background-size: 140px 140px;background-repeat: repeat;background-attachment: scroll;}p {font-size: 64px;font-weight: bold;color: white;}</style></head><body><div><p>1 Fatman</p><p>2 Fatman</p><p>3 Fatman</p><p>4 Fatman</p><p>5 Fatman</p><p>6 Fatman</p><p>7 Fatman</p><p>8 Fatman</p></div></body>
</html>
背景图片不固定示例效果图:
背景图片固定示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>背景图片固定示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 100%;height: 2000px;margin: 24px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);background-size: 140px 140px;background-repeat: repeat;background-attachment: fixed;}p {font-size: 64px;font-weight: bold;color: white;}</style></head><body><div><p>1 Fatman</p><p>2 Fatman</p><p>3 Fatman</p><p>4 Fatman</p><p>5 Fatman</p><p>6 Fatman</p><p>7 Fatman</p><p>8 Fatman</p></div></body>
</html>
背景图片固定示例效果图:
background-clip(背景裁剪)
值 | 含义 |
---|---|
border-box | 背景(图片+颜色)占据盒模型的 border+padding+content 3个区域 |
padding-box | 背景(图片+颜色)占据盒模型的 padding+content 2个区域 |
content-box | 背景(图片+颜色)占据盒模型的 content 1个区域 |
注:设置background-clip:border-box时需要让元素边框完全透明或部分透明,否则边框样式会完全遮盖住background-clip:border-box的效果。
background-clip(背景裁剪)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>background-clip(背景裁剪)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;margin: 24px;border: 32px dotted black;padding: 32px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);background-size: contain;background-repeat: no-repeat;}</style></head><body><div style="background-clip: border-box;"></div><div style="background-clip: padding-box;"></div><div style="background-clip: content-box;"></div></body>
</html>
background-clip(背景裁剪)示例效果图:
background-origin(背景图片定位参考系)
笔者在css详解position五种属性用法及其含义中提到过相对定位参考系是其在常规流中的位置,绝对定位的参考系是离其最近的定位祖先元素,固定定位的参考系是视窗。
background-position的定位参考系就与background-origin有关:
值 | 含义 |
---|---|
border-box | 背景图片相对于元素border区域进行定位 |
padding-box | 背景图片相对于元素padding区域进行定位 |
content-box | 背景图片相对于元素content区域进行定位 |
注:background-clip控制背景(图片+颜色)裁剪的区域,是将背景(图片+颜色)根据设置的属性值裁剪掉;而background-origin控制背景(图片)定位时使用的参考系,它在不同属性值切换下影响的表现效果是背景图片随着属性值改动带来的背景(图片)扩大或缩放。
background-origin(背景图片定位参考系)示例html代码:
<!DOCTYPE html>
<html><head><meta title="charset" content="utf-8"><title>background-origin(背景图片定位参考系)示例</title><style type="text/css">body {margin: 24px;padding: 24px;border: 1px solid black;}div {width: 420px;height: 320px;margin: 24px;border: 32px dotted black;padding: 32px;background-color: #06b7e1;background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);background-size: contain;background-repeat: no-repeat;}</style></head><body><div style="background-origin: border-box;"></div><div style="background-origin: padding-box;"></div><div style="background-origin: content-box;"></div></body>
</html>
background-origin(背景图片定位参考系)示例效果图:
尾言
笔者才疏学浅,慌忙之下难免有遗漏或是疏忽,如有错误之处,还望各位看官不吝赐教,笔者在此感谢。
参考
- CSS设计指南
- background-clip
不单单只有这6个,只是这6个比较常用。 ↩︎
css详解background八大属性及其含义相关推荐
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- layui添加复选框_对layui初始化列表的CheckBox属性详解,初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性 通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
- 【AndroidManifest.xml详解】Manifest属性之versionCode,versionName
Android:versionCode是什么? android:versionCode表示该软件的版本号,对用户是不可见的,它必须是一个int型的整数,它的大小代表该软件版本升级过多少次,因此每次发布 ...
- UE4 C++入门之路4-PostInitProperties函数详解(设置属性默认值的四种方法)
PostInitProperties函数详解 前言 设置属性默认值的四种方法 一 声明时赋值 二 构造函数赋值 三 构造函数初始化列表 四 PostInitProperties 前言 也许在工作或者学 ...
- Android开发之EditText属性详解+++ImageView的属性
Button的使用 不要阴影Button ---> TextView (5.0新特性) <!-- 去按钮立体效果 --> <item name="android: ...
- 在vue中引入css,详解在Vue中有条件地使用CSS类
详解在Vue中有条件地使用CSS类 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了详解在Vue中有条件地使用CSS类,编程之家小编觉得挺不 ...
- div + css 详解
第 1 页 <Div+CSS 布局大全> 整理者:Jesse Zhao 网站:http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!! ...
- (15)css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修 饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
- 一些实用博客的分享(ES6详解,echart属性详解)
推荐一个ES6的学习博客(阮老师的ES讲解) 大家如果是学习ES6的话,强烈推荐下面这个阮老师的讲解,都是对比分析,比较清楚易懂!!! 博客地址:http://es6.ruanyifeng.com/# ...
最新文章
- [导入]控制IFrame里的页面滚动原来如此简单:)
- oracle得到日期对应的星期
- js容易被忘记的基础知识点————变量类型
- 第三周:浅层神经网络
- Python解析xml文件,此实例将xml设置为模版(from lxml import etree)
- 勒索病毒病毒样本研究_我们能否通过快速,开放的研究来应对寨卡病毒?
- 使用 Clang Tools —— ClangFormat
- Android实现立体滚轮控件,Camera和Matrix实现真正的3D(WheelView)滚轮控件
- Axure share如何自适应手机屏幕
- ESP8285 sdkconfig
- 墨刀原型图设计大全(转)
- 编译选项默认关闭adb RSA指纹认证
- 国产系统deepin。为什么要国产化?国产化意味着什么?(含Deepin系统部分问题解决)
- 数据结构与算法实验4——字符串和数组 7-5 病毒变种
- 没有公网IP,怎么实现外网访问内网视频监控
- 法兰克服务器电源维修,FANUC电源模块故障维修
- 6年前布局,如今阿里智能语音成行业第一,我们的快递、客服都离不开它
- 平安夜的真实来历(平安夜的由来)
- Maltego 学习与使用
- pytorch手写VGG16网络,两种写法,低阶基础写法
热门文章
- 流量卡wifi显示无服务器,为什么用流量不卡,用WiFi就容易卡?
- 为你详细解读HTTP请求头的具体含意
- (转)整合Struts2+JasperReport Web报表应用示例
- 烫金机要进一步提高和改善机器性能
- ANSYS与LS-DYNA的关系_51CAE_新浪博客
- 神武服务器物品开放,《神武4》电脑版庭院装饰游乐·对弈棋盘限服开放
- linux shell3 --文件处理 grep sed
- 三星电视测试屏幕的软件有哪些,附文:我们如何测试屏幕?_三星 UA65F9000_液晶电视评测-中关村在线...
- 双栈排序 牛客网 程序员面试金典 C++ Python
- 计算机辅助教学的基本概念,心理学基本概念系列文库:计算机辅助教学