CSS漂亮盒子(上)
HTML文档中的所有元素都是由矩形盒子构成的——不管是包含页面结构的容器元素,还是段落中的每行文本,归根结底都是盒子。
1.背景颜色
设置页面背景颜色。
body {
background-color: #bada55;
}
简写属性:
body {
background: #bada55; /* 这里会把其他属性重置为默认值 */
}
通过background
可以一次性地设置与背景相关的多个属性。
十六进制表示法:
一个#
后面加上6位十六进制数字构成的字符串。
这个字符串由3组数字(每组各2位)构成,每个数字的取值范围是0~F。十六进制的意思就是每个数字都可能有16种不同的值,因此除了0~9这10个数,还要用A~F补足第11~16位数。
3组数字分别表示颜色中的红、绿、蓝(RGB)通道的值。每种颜色通道的值有256种可能,也就是2位十六进制数所能表示的可能性(16×16=256)。
如果3组数字中每组的2位数字相同,可以简写成3位数字。
颜色值也可以用预定义的关键字表示(比如red、green、blue等等)。
rgb()函数式表示法:
RGB的每个值可以是一个十进制数值,取值范围为0~255,也可以是一个百分比值,取值范围为0%~100%。
body {
background-color: rgb(186, 218, 85);
}
hsl()函数式表示法:
色相-饱和度-亮度(hue-saturation-lightness),即HSL模型。
body {
background-color: hsl(74, 64%, 59%);
}
注意,使用哪种表示法来表示颜色没有本质区别,它们只是表示同一事物的不同方法而已。
rgba()函数式表示法:
末尾的a表示alpha,是用于控制透明度的阿尔法通道。
body {
/* 第四个参数表示透明度,取值范围为0~1.0,1.0表示完全不透明,0表示完全透明。 */
background-color: rgba(186, 218, 85, 0.5);
}
CSS提供另一种方式来控制透明度。
.box {
background-color: #bada55;
opacity: 0.5;
}
使用opacity
让整个元素都变透明了,包括元素中包含的内容。
使用opacity
把一个元素设置为透明后,将无法再让其子元素变得不那么透明。
2.背景图片
<header class="profile-box">
</header>
.profile-box {
width: 100%;
height: 600px;
background-color: #8Da9cf;
background-image: url(img/big-cat.jpg); /* 设置背景图片 */
}
background-repeat
的默认值(repeat)决定了图片会平铺到整个元素盒子,即背景图片要沿x轴和y轴重复。
.profile-box {
background-image: url(img/big-cat.jpg); /* 设置背景图片 */
background-repeat: no-repeat; /* 禁止重复 */
/* 支持以空格分隔的针对两个方向的关键字声明语法 */
/* background-repeat: repeat no-repeat; */
}
使用url()
函数加载图片可以使用相对路径,也可以使用绝对路径,还可以使用图片的base64编码数据。
background-image: url(img/big-cat.jpg);
图片格式:
- JPEG(有损压缩,适合照片)
- PNG(无损压缩,适合图标等小尺寸文件)
- GIF(动图)
- SVG(矢量图)
- WebP(Google开发的一种新图片格式)
位图意味着文件会包含每个像素的数据,拥有内在的维度(宽度和高度)。
SVG图形包含的是如何在屏幕上绘制图形的指令,它可以任意缩放,也可以在任意像素密度的屏幕上清晰呈现。
3.背景图片语法
3.1 背景位置
背景图片的位置由background-position
属性控制。
background-position
属性既可以使用关键字,也可以使用像素、em或百分比。最简单的情况下,可以只给两个值:一个表示相对于左侧的偏移量,一个表示相对于顶部的偏移量。
.profile-box {
/* 省略 */
background-position: 50% 50%;
}
如果使用像素或em单位来设置背景图片的位置,那么图片的左上角会相对于元素的左上角定位,也就是会偏移指定的数值。如果设置背景图片的位置时使用了百分比,定位的是图片中对应的点。如果水平或垂直方向都设置为20%,那么你定位的实际上是距图片左边和上边各20%的点,而这个点会与距离父元素左边和上边各20%的点重合。
使用关键字来对齐背景图片,要在x轴上用left
、center
或right
,在y轴上用top
、center
或bottom
。顺序一般都是先x轴后y轴。
.profile-box {
/* 省略 */
background-position: left top;
}
在只使用两个关键字的情况下,规范并没有限定顺序(如可以使用top left
)。
新语法允许给background-position
添加外边空声明,先写边界关键字,再写长度值。
<p>
<a href="/activate" class="link-with-icon">Activate flux capacitor</a>
</p>
.link-with-icon {
padding-right: 2em;
background-image: url(img/icon.png);
background-repeat: no-repeat;
background-position: right 1em top 50%;
}
使用calc()
函数可以让浏览器替你计算任何数值(角度、像素、百分比,等等),甚至还支持动态计算的混合单位。
.link-with-icon {
/* 省略 */
background-position: calc(100% - 1em) 50%;
}
3.2 背景裁剪与原点
默认情况下,背景图片是绘制在元素边框以内的。如果把背景图片定位到边框下方,而边框又被设值为半透明,那么图片边缘就会出现半透明的边框。使用background-clip
属性可以改变这个行为。
background-clip
属性的默认值为border-box
。
.profile-box {
border: 10px solid rgba(220, 220, 160, 0.5);
padding: 10px;
background-image: url(img/cat.jpg);
background-clip: padding-box;
}
使用background-origin
属性控制背景定位默认的原点的位置。
3.3 背景附着
背景会附着在指定元素的后面,如果你滚动页面,那么背景也会随着元素移动而移动。可以通过background-attachment
属性改变这种行为。
.profile-box {
background-attachment: fixed;
}
3.4 背景大小
使用background-size
属性可以设置图片大小,也可以让它随元素大小缩放而缩放(不管页面如何缩放,都让内容保持自己的宽高比)。要让图片随元素缩放而缩放,则必须使用百分比值。不过要注意,百分比值并不是相对于图片固有大小,而是相对于容器大小。
.profile-box {
/* 让图片宽度保持为100%,同时保持自己固有的宽高比。*/
background-size: 100% auto;
}
使用关键字contain
让浏览器尽可能保持图片最大化,同时不改变图片的宽高比,避免图片被裁切。
.profile-box {
background-size: contain;
}
3.5 背景属性简写
使用background
这个简写属性要注意,它会把所有没有明确指出的属性都重置为其默认值。一般而言,明确的代码更不容易出错,而且也更容易让人理解。
.profile-box {
background: url(img/cat.jpg) 50% 50% / cover no-repeat padding-box content-box #bada55;
}
参考资料:
CSS漂亮盒子(上)的更多相关文章
- CSS漂亮盒子(下)
4.多重背景 CSS支持一个元素设置多个背景图片. 每个背景属性有相应的多值语法,多个值由逗号分隔. .multi-bg-shorthand { width: 300px; height: 200px ...
- CSS布局(上)
CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...
- 深入理解CSS系列(一):理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- 在创维E900-S悦Me盒子上安装第三方软件
0x00 不甘寂寞 创维E900-S这款悦Me盒子功能还算可以,但不能接受它禁止安装第三方软件这一点.网上搜了半天,可能是比较新的机型没人关注,找不到任何方法,只好自己动手试试. 0x01 Fiddl ...
随机推荐
- flask 源码专题(八):路由加载
1.示例代码 from flask import Flask app = Flask(__name__,static_url_path='/xx') @app.route('/index') def ...
- java 基本语法(五) 流程控制(二) 循环结构
1.循环结构的四要素① 初始化条件② 循环条件 --->是boolean类型③ 循环体④ 迭代条件说明:通常情况下,循环结束都是因为②中循环条件返回false了. 2.三种循环结构:2.1 fo ...
- java 基础(四)搭建vim作为java开发环境
分享在Ubuntu 14.04在Vim上配置Java开发环境的过程步骤,希望对大家有所帮助. A 首先下载javacomplete.zip 到Linux公社资源站下载: --------------- ...
- mongodb(五):聚合操作(python)
pymongo的聚合操作 数据类型样式 /* 1 */ { "_id" : ObjectId("5e5a32fe2a89d7c2fc05b9fc"), &quo ...
- javascript基础(三): 操作DOM对象(重点)
DOM:文档对象模型 核心 浏览器网页就是一个Dom树形结构! 更新:更新Dom节点 遍历Dom节点:得到Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点 要操作一个Dom节点,就必须要先 ...
- 机器学习实战基础(二十四):sklearn中的降维算法PCA和SVD(五) PCA与SVD 之 重要接口inverse_transform
重要接口inverse_transform 在上周的特征工程课中,我们学到了神奇的接口inverse_transform,可以将我们归一化,标准化,甚至做过哑变量的特征矩阵还原回原始数据中的特征矩阵 ...
- socket采用epoll编程demo
epoll工作流程 首先,需要调用epoll_create创建epoll: 此后我们就可以进行socket/bind/listen: 然后调用epoll_ctl进行注册: 接下来,就可以通过一个whi ...
- C/C++中的 if(指针变量) 和 if(!指针变量)
目录 if(指针变量) 代码演示 if(指针变量) 解读代码 if(!指针变量) 解读代码 总结 替代方案.推荐写法!!!!! if(指针变量) 当把一个指针作为条件表达式时,所要判断的条件实际上就是 ...
- react中实现可拖动div
把拖动div功能用react封装成class,在页面直接引入该class即可使用. title为可拖动区域.panel为要实现拖动的容器. 优化了拖动框超出页面范围的情况,也优化了拖动太快时鼠标超出可 ...
- TLV通信协议
基础 TLV协议是BER编码的一种,全称是Tag.length.value.该协议简单高效,能适用于各种通信场景,且具有良好的可扩展性.TLV协议的基本格式如下: 其中,Tag占2个字节,是报文的唯一 ...