【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★
【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★
一、CSS 背景设置
1、背景颜色
CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;
background-color:颜色值;background-color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 :
- 预定义颜色 : 直接使用 颜色的英文名称 , blue , red , green ;
- 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;
- RGB 代码颜色 :
- 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
- 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)
背景颜色示例 :
background-color: pink;2、背景图片
CSS 的背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ;
background-image: url(相对路径);- 在 url() 中设置相对链接
- url() 中的链接没有双引号
3、背景图片平铺样式
通过设置 background-repeat 属性 , 可以设置平铺效果 ;
- 默认平铺样式 :
background-repeat: repeat;, 背景在 X 和 Y 轴方向上平铺 ;
- 背景不平铺 :
background-repeat: no-repeat;, 背景放在盒子左上角 ;
- 横向平铺 :
background-repeat: repeat-x;, 背景在 X 轴方向上平铺 ;
- 纵向平铺 :
background-repeat: repeat-y;, 背景在 Y 轴方向上平铺 ;
4、背景图片位置
如果 盒子的大小 大于 背景图片的大小 , 默认的 图片 位置是 左上角 ;
设置背景位置的 CSS 语法如下 :
background-position : length length
background-position : position position background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ;
- length 长度 :
- 百分数 : 如 50% ;
- 浮点数 + 单位 : 如 : 150.5px ;
- position 方位 : 设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ;
- 左上右下 : top , bottom , left , right ;
- 中间 : center
background-position 属性值使用注意事项 :
- 设置背景图片 : 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性 ;
- 方位设置 : 如果设置 position 方位属性值 , 设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ;
- 顺序无关 : 如果指定了两个方位值 , 则 自动匹配顺序 , 先后顺序无关 , left top 与 top left 效果相同 , 都是左上角 ;
- 设置一个值 : 如果 只设置了一个方位值 , 那么另外一个默认居中对齐 , 如 :
- 设置了 left , 则垂直方向居中对齐 ;
- 设置了 top , 则水平方向居中对齐 ;
- 坐标设置 : 如果 设置的是 length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标 ;
- 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置 ;
- 同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标 ;
5、超大背景图片设置
网页背景兼容问题
在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 ,
如 : 背景图片 使用 1920 x 1080 像素的图片 ;
每个人的电脑分辨率不同 ,
- 有的电脑的分辨率可能没有 1920 x 1080 那么大 , 如 800 x 600 , 1080 x 720 等 ;
- 有的电脑的分辨率可能很大 , 如 4K 分辨率 3840 x 2160 ;
这里给出的策略是 尽量把图设置的越大越好 , 图越大 , 能兼容的分辨率越多 ;
- 如果 电脑分辨率低于图片分辨率 , 只能显示部分内容 , 这里建议将核心内容放在中心位置 ;
- 如果 电脑分辨率高于图片分辨率 , 则显示全部内容 , 并且外面还有空白边框存在 ;
超大背景图片推荐定位
因此这里要设置图片背景的位置 , 一般超大背景图片的背景定位都使用
background-position: center top;进行定位 , x 轴方向上居中对齐 , y 轴方向上对齐到顶部 ,
这样设置 :
- 如果电脑分辨率很小 , 可以看到图片中心偏上的位置 ;
- 如果电脑分辨率很大 , 背景图片位于屏幕中心偏上位置 ;
超大背景图片编辑策略
图片编辑策略 : 在高分辨率的电脑上可以显示全部内容 , 在低分辨率的电脑上只能显示下图红色矩形框中的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置 , 如下图所示的 白色矩形 范围中 ;
6、背景附着
背景附着 用于设置 背景图片 是 可滚动的 还是 固定的 ;
使用 背景附着 的前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 :
background-image: url(images/xxx.jpg);背景附着 语法如下 :
background-attachment : scroll | fixed background-attachment 属性值设置 : scroll 或 fixed 二选一 ;
- scroll : 背景图像 与 网页内容 绑定 , 网页滚动时 , 背景图像也进行滚动 ;
- fixed : 背景图像 固定 , 滚动网页时 , 背景图像位置保持不变 ;
7、背景样式简写
使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 , 定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ;
body {
/* 设置一个足够高的高度, 让页面滚动起来 */
height: 2000px;
/* 设置背景图片 */
background-image: url(images/bg.jpg);
/* 设置图片背景平铺模式 */
background-repeat: no-repeat;
/* 超大背景图片定位 */
background-position: center top;
/* 背景固定 */
/*background-attachment: fixed;*/
/* 背景滚动 */
background-attachment: scroll;
}类似于 文本样式的字样样式综合写法 方式 ,
选择器 { font:font-style font-weight font-size/line-height font-family;}CSS 背景也可以进行进行简写 , 语法格式如下 :
background: pink url(image.jpg) no-repeat scroll center top ;background 属性值的 各种背景样式属性的顺序 没有进行强制定义 , 这里 建议按照如下顺序进行编写 :
- 背景颜色
- 背景图片
- 背景平铺
- 背景滚动
- 背景位置
8、背景半透明
背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ;
下面的 CSS 样式中 , 就是 设置黑色背景 , 透明度为 20% ;
background: rgba(0, 0, 0, 0.2);颜色的透明度 alpha 取值范围是 0 ~ 1 之间 ,
在使用时 , 可以 省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 :
background: rgba(0, 0, 0, .2);背景半透明 指的是 盒子的背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示的内容不受背景影响 , 照常显示 ;