【CSS必看】一文搞懂background相关操作

一、背景颜色图片及其平铺

===========================================================================

先看下面一段代码

在浏览器中运行如下所示：

如图所示出现了平铺的效果，那么能否取消平铺呢，答案是显而易见的。我们可以通过background-repeat来取消平铺：

div {

width: 400px;

height: 400px;

background-color: pink;/设置背景颜色/

background-image: url(curry.jpg);/设置背景图片地址/

background-repeat: no-repeat;/取消平铺/

}

在浏览器中运行如下所示：

二、背景位置

=====================================================================

我们的背景图片在取消平铺后，露出了底部的背景颜色，那么我们有没有什么办法将背景图片向右向左或者向想要的方向进行移动呢？

background-position来解决这个问题

利用方位名词 top bottom来更改背景图片的位置

比如：

background-position:left top; 背景图片就跑到左上角了

background-position:left top; 背景图片就跑到右上角了

左下角右下角同理，那么想让背景图片居中怎么办呢？

background-position:center center;

其中第一个center代表水平居中，第二个center是垂直居中

如果方位名词只写一个，那么另外一个默认为center

但是如果我们想移动到精确指定位置应该怎么办呢？

首先我们要知道在网页中的y轴坐标的正向不是我们在小学的时候学的向上而是向下

示例：下面我们让背景图片向右平移20像素，向下移动30像素：

div {

width: 400px;

height: 400px;

background-color: pink;/设置背景颜色/

background-image: url(curry.jpg);/设置背景图片/

background-repeat: no-repeat;/取消平铺/

background-position: 20px 30px;/精确坐标，第一个一定是x,第二个一定是y/

}

三、背景附着（固定）

=========================================================================

下面我们将上例的背景放在水平居中垂直靠上的位置

然后打上一大段文字：

运行代码：

滚动滑轮向下图片就消失了

如果我们想让图片固定住，在滚动滑轮的时候只有图片在滑动应该怎么做呢？

background-attachment: fixed;

background-attachment 默认的是 scroll,代表图片随内容滚动

四、背景简写

=====================================================================

我们写了这么多条background语句，是不是显得非常的繁琐呢，我们可以用一条总语句来简写background的操作。如果我们要设置背景颜色为#000，背景图片地址为curr.jpg,背景图片不重复，固定，位置水平居中，竖直方向上偏上25像素，应该如下设置：

background: #000 url(curry.jpg) no-repeat fixed center -25px

五、背景半透明

======================================================================

css3支持背景半透明的写法语法格式是：

background: rgba(0,0,0,0.3);

最后一个参数是 alpha 透明度 取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

同样，可以给文字和边框透明 都是 rgba 的格式来写

六、背景缩放

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！