html背景图片去重,CSS 背景图片 添加 重复和定位。

CSS 背景色. 背景图片. 背景重复. 背景图片固定和定位

body{

height:3000px;

background-image:url(C:/Users/Administrator/Desktop/xxx.png);

background-repeat:no-repeat;

background-position:bottom;/*向下的*/

background-attachment:fixed;

/*给网页3000px高度 来观察背景图像固定属性 background-attachment：fixed*/

}

h1{

text-align:center;

}

p{

background-color:pink;

}

div{

/* 给背景添加图片 一定要注意 图片的取值路径 */

background-image:url(C:/Users/Administrator/Desktop/xxx.png);

background:no-repeat; /* bupingpu */

background-repeat:repeat-x;/*1.background-repeat:repeat-x 我是水平平铺 */

background-repeat:repeat-y;/*2.background-repeat:repeat-y 我是垂直平铺*/

background-attachment:fixed;

/* background-position:5px 6px; */

border:1px solid red;

height:100px;

}

1.背景色

1.属性：background-color

2.注意：背景颜的会填充到元素的边框 内边距 内容区域。

2.背景图片

属性：background-image

取值：URL(图像路径)

小星星

3.背景重复

1.默认情况 背景图会在水平 和 垂直两个方向(就是平铺)

属性：background-repeat

取值repeat：默认值，水平垂直平铺。

repeat-x: 水平平铺；

repeat-y: 垂直平铺；

no-repeart：不平铺；

4.背景图像固定

属性：background-attachment

取值

fixed，背景图像固定
background-attachment:fixed;

5.背景定位

改变背景图像在元素中的位置

属性：background-position

取值：x y

x表示水平方向移动 +向右 -向左

y表示垂直方向 +向上 -向下

x% y% :

0% 0% : 显示在元素的左上方

100% 100% : 显示在元素的右下方

50% 50% : 居中

left :靠左

right:靠右

center :将元素显示在水平或垂直方向的中间

top:靠上

bottom:靠下

background-position:left top;

background-position:top left;

background-position:center;

2019-02-21