CSS 基础 背景相关属性操作

1.background-color:red ; //设置背景颜色为红色,rgb(0,0,0)和transparent 均为透明颜色

2.background-image(可缩bgi写用tab键)

      语法:background-image:url('图片的路径');

注意点:背景图片不会将原有的盒子撑开;如果一张图片占不满一个盒子,默认是在水平和垂直方向平铺的

3.背景平铺属性

background-repeat(简写bgr)

属性值 效果
no-repeat 不平铺
repeat-x 沿着水平方向平铺(x轴)
repeat-y 沿着垂直方向平铺(y轴)

 

4.背景位置

background-position(bgp)

            语法格式:background-position:水平方向位置  垂直方向位置;

         CSS 基础  背景相关属性操作

如果使用第二种方式,坐标轨迹规则:(盒子总大小是400*400px,则background-positon:200px 200px;则是y轴的一半和x轴的一半,即为右下角)

CSS 基础  背景相关属性操作

 

 注意:两种方式可以混合使用,比如:background-position:center 200px;

总结:背景相关属性的连写的方式

属性名:background

      书写顺序推荐:background:color image repeat position

注意点:连写和单写同时出现,单写一定要放在连写的下面,否则会覆盖属性;

 

扩展:img标签和背景图片的区别

注意:背景图片要想显示出来效果,要配合标签使用,并设定宽和高;而img标签是不需要的

上一篇:Web前端:HTML+CSS+JS实现美女照片3D立方体旋转


下一篇:字节跳动Web Infra发起 Modern.js 开源项目,打造现代 Web 工程体系