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

二、背景位置

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

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

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 的格式来写

六、背景缩放

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

背景图片设置大小 background-size

background-size: 100px /*尽量只改一个值，防止缩放扭曲失真

或者可以通过百分比的方式修改背景图片大小：

background-size: 50%; /把背景图片缩放为原来的一半大小/

也可以通过cover及contain的方式缩放背景图片：

background-size: cover;/*设置为cover时，会自动调整缩放比例，保证图片始终充满背景区域，如有溢出部分则会被隐藏

background-size: contain;/*设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域

七、凹凸文字效果

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

我们如何做出这样有立体效果的文字呢

这就用到了 text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色

由上图可知，我们给文字添加了两处阴影，一处向右走是暗色，一处向左走是亮色。 这样就达到了凹凸文字这样的立体效果

注意：网页中竖直方向(y轴)向下为正，向上为负

代码如下：