其他分享
首页 > 其他分享> > CSS 基础 背景相关属性操作

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:水平方向位置  垂直方向位置;

         

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

 

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

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

属性名:background

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

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

 

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

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

标签:平铺,repeat,背景,background,position,200px,CSS,属性
来源: https://www.cnblogs.com/jq-growup/p/15739938.html