HTML CSS 背景处理

css 允许纯颜色作为背景颜色,也允许图片作为背景。

一、背景颜色

使用 backgourd-color 这个属性为元素设置背景色,这个属性接受任何合法的颜色值。

p

上面这条是把 p 标签的背景色设为红色。

如果一个元素的背景没有设置颜色,那它的背景默认是透明的。

二、背景图像

把图像放入背景,就需要用到 background-image 属性。background-image 的默认值是 none,表示背景没有任何的背景图片。

body

这条规则就是把 body 的背景设置为图片 bg.jpg 。

如果想对某个元素应用背景图片

p.flow

这样只针对 p 标签使用 .flow 类选择器的应用这个背景。

this has a background image!

三、背景图像重复

图像原图很小,就像一个大桌子上放了一个特别小的桌布。想把图扩张到整个背景,就需要 background-repeat 属性。repeat-x 和 repeat-y 允许图像在水平和垂直方向重复平铺,no-repeat 不允许图像在任何方向平铺。

body{

background-image:url(bg.jpg);

background-repeat:repeat-y;

}

body{

background-image:url(bg.jpg);

background-repeat:repeat-x;

}

这个规则是一个背景图片出现在 body 的左上角,如果不平铺的话,就原图显示在左上角。

四、背景图定位

使用 background-position 这个属性来控制背景图在元素里的显示位置。

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-position:center center;

}

上面的规则就是让背景图片,在元素的中央显示。

位置的关键字有:center top bottom left right。

background-position 的位置由两个位置共同决定,background-position:top left ,这个就是左上角,background-position:bottom right 就是右下角,等等...

还有用百分值来表示的,例:

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-position:50% 50%;

}

这个规则也是让背景图片,在元素的中央显示。

这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-position:66% 33%;

}

background-position 的默认值是 0% 0%,在功能上相当于 top left。

五、背景关联

background-attachment,这个属性就是可以让背景图片固定在某个位置或者不固定。比如文档比较长,出现滚动条。这时候背景图片就会随着滚动而滚动,如果想让背景图片固定在某一点不动,就可以用 background-attachment:fixed,

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-attachment:fixed;

}

如果想让背景图片随着滚动,就用background-attachment:scroll;

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180605G18TFS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券