前言
在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔😘
背景属性
背景颜色
background-color: [指定颜色]
默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.
<style> body { background-color: #f3f3f3; } .bgc .one { background-color: red; } .bgc .two { background-color: #0f0; } .bgc .three { /* 背景透明 */ background-color: transparent; } </style> <div class="bgc"> <div class="one">红色背景</div> <div class="two">绿色背景</div> <div class="three">透明背景</div> </div>
背景图片
background-image: url(...);
比 image 更方便控制位置(图片在盒子中的位置)
注意:
- url 不要遗漏.
- url 可以是绝对路径, 也可以是相对路径
- url 上可以加引号, 也可以不加
<style> .bgi .one { background-image: url(rose.jpg); height: 300px; } </style> <div class="bgi"> <div class="one">背景图片</div> </div>
背景平铺
background-repeat: [平铺方式]
重要取值:
repeat: 平铺no-repeat: 不平铺repeat-x:水平平铺repeat-y:垂直平铺
默认是 repeat.
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
<style> .bgr .one { background-image: url(rose.jpg); height: 300px; background-repeat: no-repeat; } .bgr .two { background-image: url(rose.jpg); height: 300px; background-repeat: repeat-x; } .bgr .three { background-image: url(rose.jpg); height: 300px; background-repeat: repeat-y; } </style> <div class="bgr"> <div class="one">不平铺</div> <div class="two">水平平铺</div> <div class="three">垂直平铺</div> </div>
背景位置
background-position: x y;
修改图片的位置.
参数有三种风格:
- 方位名词: (
top, left, right, bottom)
- 精确单位: 坐标或者百分比==(以左上角为原点)==
- 混合单位: 同时包含方位名词和精确单位
<style> .bgp .one { background-image: url(rose.jpg); height: 500px; background-repeat: no-repeat; background-color: purple; background-position: center; } </style> <div class="bgp"> <div class="one">背景居中</div> </div>
注意
- 如果参数的两个值都是方位名词, 则前后顺序无关.
(top left和left top等效) - 如果只指定了一个方位名词, 则第二个默认居中. (
left则意味着水平居中,top意味着垂直居中. ) - 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
- 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
- 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100
center表示横坐标为 100, 垂直居中)
关于坐标系:
计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).
背景尺寸
- 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
- 也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
<style> .bgs .one { width: 500px; height: 300px; background-image: url(rose.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; } </style> <div class="bgs"> <div class="one">背景尺寸</div> </div>
注意 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.
contain:
cover:
圆角矩形
通过 border-radius 使边框带圆角效果.
基本用法：
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
<div>蛤蛤</div> div { width: 200px; height: 100px; border: 2px solid green; border-radius: 10px; }
生成圆形
让 border-radius 的值为正方形宽度的一半即可.
div { width: 200px; height: 200px; border: 2px solid green; border-radius: 100px; /* 或者用 50% 表示宽度的一半 */ border-radius: 50%; }
生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
div { width: 200px; height: 100px; border: 2px solid green; border-radius: 50px; }
展开写法：
border-radius 是一个复合写法. 实际上可以针对四个角分别设置.
border-radius:2em;
等价于：
border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;
或者：
border-radius: 10px 20px 30px 40px;
等价于(按照顺时针排列):
border-top-left-radius:10px; border-top-right-radius:20px; border-bottom-right-radius:30px; border-bottom-left-radius:40px;
【前端基础篇】CSS基础速通万字介绍（下篇）2：https://developer.aliyun.com/article/1617348
