css多图平铺英语,css-background：平铺、固定、位置、复合以及半透明

1.1背景图片

bakeground-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)

background-image:none|url(url)

1.2背景平铺

background-repeat:repeat|no-repeat|repeat-x|repeat-y

平铺效果:background-repeat:repeat

image.png

不平铺效果：background-repeat:no-repeat

image.png

x轴平铺：background-repeat:repeat-x

y轴平铺：background-repeat:repeat-y

1.3背景位置-方位名词

利用background-position属性可以改变图片在背景中的位置

background-position:x y;

参数值

说明

length

百分数\浮点数字和单位标识符组成的长度值

position

top\center\bottom\left\right \center 方位名词

案例1：小图标文字

Snipaste_2020-05-13_17-18-57.png

h3{

width:140px ;

height: 40px;

background-color: #fff;

font-size: 14px;

/* 取消粗体 */

font-weight: 400;

/* 与height一样高可以文字居中 */

line-height: 40px;

background-image: url(images/title_sprite.png);

/* 背景图片不平铺 */

background-repeat: no-repeat;

/* 让图片存在于左中 */

background-position: left center;

/* 首行缩进2字符 */

text-indent: 2em;

}

成长守护平台

1.4背景固定

背景固定：background-attachment:fixed ;

背景滚动：background-attachment:scroll ;

案例2：大背景固定(背景不会随着文本移动)

body{

/* 大背景水平居中 */

background-image: url(images/388021152363398.jpg);

background-repeat: no-repeat;

/* 大背景居中，上方留了40px的空 */

background-position: center 40px;

color:#fff;

font-size:20px;

/* 把背景图片固定住 */

background-attachment:fixed ;

}

1.5背景复合写法

一般约定为

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background:black url(image.jpg) no-repeat fixed top;

1.6背景半透明

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

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

我们习惯把0.3的0省略，写为background:rgba(0,0,0,3);

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

1.7综合案例

image.png

.nav a{

/* 把a设置成行列块元素 */

/* 行列块元素和块元素的区别

块元素独占一行(可以设置高度)

行列块元素高度宽度都可以设置，不会独占一行 */

display:inline-block;

background-color: #617172;

width:120px;

height: 58px;

font-size: 14px;

color:#fff;

line-height: 48px;

text-decoration: none;

text-align: center;

}

.nav .bg1{

background:url(images/xiaoqiang001-html_css_material-master/bg1.png) no-repeat;

}

.nav .bg2{

background:url(images/xiaoqiang001-html_css_material-master/bg2.png) no-repeat;

}

.nav .bg3{

background:url(images/xiaoqiang001-html_css_material-master/bg3.png) no-repeat;

}

.nav .bg4{

background:url(images/xiaoqiang001-html_css_material-master/bg4.png) no-repeat;

}

.nav .bg5{

background:url(images/xiaoqiang001-html_css_material-master/bg5.png) no-repeat;

}

/* 悬停换颜色 */

.nav .bg1:hover{

background:url(images/xiaoqiang001-html_css_material-master/bg11.png) no-repeat;

}

.nav .bg2:hover{

background:url(images/xiaoqiang001-html_css_material-master/bg22.png) no-repeat;

}