【web前端开发 | CSS】css的背景

思维导图

文章目录

思维导图css背景1：背景颜色2：背景图片3：背景平铺4：背景位置5：图像固定（背景附着）6：复合写法7：背景颜色半透明

css背景

1：背景颜色

background-color: transparent；（背景透明） background-color: color；（背景改的颜色）

2：背景图片

background-image:none; background-image:url()；（url带图片位置）

【叽叽歪歪】对比img ，然后背景图片一般用于比较大的图或者比较小的logo

3：背景平铺

background-repeat: no-repeat; 属性描述repeat图片平铺（默认）no-repeat不平铺repeat-x图片在x轴上平铺repeat-y图片在y轴上平铺

4：背景位置

background-position: 0 0;

① 方位名词

属性描述lenght百分数│由浮点数字和单位标识符组成的长度值positiontop center bottom left center right方位名词

参数是方位名词 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

参数是混合单位 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5：图像固定（背景附着）

background-attachment: fixed; 属性描述scroll背景图片滚动（默认）fixed背景图片固定

6：复合写法

background: transparent url(image.jpg) repeat-y fixed top ;

7：背景颜色半透明

background：rgba (0, 0, 0, 0.3)

alpha:透明度 0~1取值范围

0.3 也可写成 .3

【叽叽歪歪】利用以上属性做一个五彩导航栏，只做了一个，其他同理可得，略…

<style> a { background-color: pink; text-decoration: none; color: white; display: inline-block; width: 120px; height: 58px; text-align: center; line-height: 48px; } .bg_1 { background: url(image/bg1.png) no-repeat; } .bg_1:hover { background-image: url(image/bg11.png); } </style> <div class="nav"> <a href="#" class="bg_1">五彩导航栏</a> <a href="#">五彩导航栏</a> </div> 运行截图