CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;
background-color:颜色值;
background-color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 :
背景颜色示例 :
background-color: pink;
CSS 的背景图片样式语法 : 背景图片的链接需要写在 url()
中 , 并且 url() 中的链接可以没有双引号 ;
background-image: url(相对路径);
通过设置 background-repeat
属性 , 可以设置平铺效果 ;
background-repeat: repeat;
, 背景在 X 和 Y 轴方向上平铺 ;background-repeat: no-repeat;
, 背景放在盒子左上角 ;
background-repeat: repeat-x;
, 背景在 X 轴方向上平铺 ;
background-repeat: repeat-y;
, 背景在 Y 轴方向上平铺 ;
如果 盒子的大小 大于 背景图片的大小 , 默认的 图片 位置是 左上角 ;
设置背景位置的 CSS 语法如下 :
background-position : length length
background-position : position position
background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ;
background-position 属性值使用注意事项 :
在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 ,
如 : 背景图片 使用 1920 x 1080 像素的图片 ;
每个人的电脑分辨率不同 ,
这里给出的策略是 尽量把图设置的越大越好 , 图越大 , 能兼容的分辨率越多 ;
因此这里要设置图片背景的位置 , 一般超大背景图片的背景定位都使用
background-position: center top;
进行定位 , x 轴方向上居中对齐 , y 轴方向上对齐到顶部 ,
这样设置 :
图片编辑策略 : 在高分辨率的电脑上可以显示全部内容 , 在低分辨率的电脑上只能显示下图红色矩形框中的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置 , 如下图所示的 白色矩形 范围中 ;
背景附着 用于设置 背景图片 是 可滚动的 还是 固定的 ;
使用 背景附着 的前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 :
background-image: url(images/xxx.jpg);
背景附着 语法如下 :
background-attachment : scroll | fixed
background-attachment 属性值设置 : scroll 或 fixed 二选一 ;
使用 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
属性值的 各种背景样式属性的顺序 没有进行强制定义 , 这里 建议按照如下顺序进行编写 :
背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ;
下面的 CSS 样式中 , 就是 设置黑色背景 , 透明度为 20% ;
background: rgba(0, 0, 0, 0.2);
颜色的透明度 alpha 取值范围是 0 ~ 1 之间 ,
在使用时 , 可以 省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 :
background: rgba(0, 0, 0, .2);
背景半透明 指的是 盒子的背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示的内容不受背景影响 , 照常显示 ;