CSS的背景属性的使用

 时间:2024-10-22 02:58:35

1、在我们制作网页的时候,需要添加背景来渲染网页,那么css中的背景background应该怎么使用呢,打开编辑器,我们开始介绍

CSS的背景属性的使用

2、首先为背景添加图片,使用background-image属性url()中添加图片的路径位置,在网页中查看效果

CSS的背景属性的使用CSS的背景属性的使用

3、发现上面的背景图片重复的进行填充整个网页,为了使不让其重复填充,使用background-repeat:no-repeat参数禁止重复,这样就只有单个图片了

CSS的背景属性的使用CSS的背景属性的使用

4、图片的大小还有些问题,我们使用background-size:进行定义背景图片的大小,我们使用百分比相对于填充网页的大小来定义

CSS的背景属性的使用CSS的背景属性的使用

5、我们想要将背景图片定位到网页的正中央,那么使用background-position进行定位,定位必须要有个参照点,使用background-origin:padding-box背景图像填充框的相对位置

CSS的背景属性的使用CSS的背景属性的使用CSS的背景属性的使用

6、当我们在滚动网页的时候会发现背景不会随着网页的滚动而改变其位置,是应为使用background-attachment:fixed的属性和参数

CSS的背景属性的使用

7、总结: background属性中有许多的分支,都是用来设置背景的属性

  • 如何使用CSS3中的transition属性设置动画效果
  • box-sizing属性
  • html+css+js圆形旋转菜单
  • 如何使用CSS3样式属性控制元素边框显示图片边框
  • Html5的表单创建
  • 热门搜索
    毕节旅游 微山湖旅游 适合情侣旅游的地方 中国旅游报 上海旅游景点推荐 成都航空旅游职业学校 天台山旅游攻略 葫芦岛旅游景点大全 莆田旅游 重庆旅游职业学院