【Web前端学习笔记】-CSS3-背景属性(background)

Megan_Feng

已于 2023-04-27 10:33:06 修改

阅读量706

点赞数 1

分类专栏： Web前端学习笔记文章标签： css3 学习笔记

于 2023-04-26 00:07:25 首次发布

本文链接：https://blog.csdn.net/weixin_46681936/article/details/130376476

版权

Web前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 学习内容概述

学习了CSS3中有关背景属性的五大知识点，包括：
- 颜色 background-color
- 图片 background-image
- 图片大小 background-size
- 图片位置 background-position
- 图片填充方式 background-repeat

2. 背景属性知识点

2.1. 颜色 background-color

颜色主要有四种表示方式，即：名称（如red），十六进制（如#ff0000），RGB，RGBA（A代表透明度）。示例如下：

<style>标签下：

<!-- 以下四种颜色定义方式任选其一即可 -->
.myclass{background-color: red;}
.myclass{background-color: #ff0000;}
.myclass{background-color: rgb(255,0,0);}
.myclass{background-color: rgba(255,0,0,0.3);}

<body>标签下：

<div class="myclass"></div>

则该元素背景颜色按照<style>标签下定义的颜色填充。

2.2. 图片 background-image

<style>标签下

.myclass2{background-image: url("图片路径");}

❗ 背景图片的显示方式：

图片大小>元素大小：默认显示图片左上角，填充满整个元素；
图片大小<元素大小：默认图片水平、垂直居中于元素内。

2.3. 图片大小 background-size

颜色主要有四种表示方式，即：名称（如red），十六进制（如#ff0000），RGB，RGBA（A代表透明度）。示例如下：

background-size参数	图片大小显示效果
cover	保持图片纵横比，并完全填充元素
contain	保持图片纵横比，并适合元素
（自定义）	- 像素 - 百分比

.myclass2{background-size: 300px 500px}   <!-- 像素 -->
.myclass3{background-size: 80% 50%}   <!-- 百分比 -->

2.4. 图片位置 background-position

图片默认位置：左上角
背景图片的位置定义主要有三种：九宫格定点法、像素、百分比。

2.4.1. 九宫格定点法

红色：左、中、右
蓝色：上、中、下

left top	center top	right top
left center	center center	right center
left bottom	center bottom	right bottom

.myclass3{background-position: center top;}   <!-- 水平居中，垂直靠上 -->

2.4.2. 像素

x% y%，其中x%代表水平位置，y%代表垂直位置。

.myclass3{background-position: 40% 60%;}

2.4.3. 百分比

xpx ypx，其中xpx代表水平位置，ypx代表垂直位置。

.myclass3{background-position: 40px 60px;}

2.5. 图片填充方式 background-repeat

background-repeat参数	图片填充方式
no-repeat	图片在元素内不填充
repeat	图片重复出现，横、纵向填满元素
repeat-x	图片重复出现，横向填满元素
repeat-y	图片重复出现，纵向填满元素

Megan_Feng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Web前端学习笔记】-CSS3-背景属性(background)

学习了CSS3中有关背景属性的五大知识点，包括：颜色 background-color图片 background-image图片大小 background-size图片位置 background-position图片填充方式 background-repeat。
复制链接

扫一扫