前端背景图放置_前端程序员需了解的css背景如何设置?

原标题:前端程序员需了解的css背景如何设置?

css知识点之背景

主要学习内容:

背景色

背景图像

背景重复

背景定位

背景关联

1、背景色

background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。例:这条规则把元素的背景设置为灰色:p {background-color: gray;}

2、背景图像

background-image 属性为元素设置背景图像。background-image 属性的默认值是none,表示背景上没有放置任何图像。

例:如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

body {background-image: url(/i/eg_bg_04.gif);}

3、背景重复

background-repeat 属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。默认地,背景图像将从一个元素的左上角开始。

例:

body

{background-image: url(/i/eg_bg_03.gif);

background-repeat: repeat-y;}

4、背景定位

background-position 属性改变图像在背景中的位置

例:在 body 元素中将一个背景图像居中放置: body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:center;

}

background-position 属性提供值有很多方法

a) background-position 属性后面的值可为关键字:

b)background-position 属性后面的值可为百分数:

例 background-position:50% 50%;

C)background-position 属性后面的值可为长度值:例:background-position:50px 100px;

5、背景关联

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

责任编辑:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值