给HTML中的块元素设置背景图片

css中关于块元素的背景有 background 属性。

background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置

想要给块元素设置背景图片时,就用background-image属性,它的值是url(图片路径)
当图片比块元素小时,可以用background-repeat属性,
值选项:

效果
repeat-x 在水平方向上显示多个图片
repeat-y 在竖直方向上显示多个
no-repeat 不重复,只显示一个
repeat 默认。背景图像将在垂直方向和水平方向重复。
inherit 规定应该从父元素继承 background-repeat 属性的设置。

还可以用background-position决定图片放在块元素的哪个位置。
background-position的值用两个百分数显示,第一个代表水平方向上的位置,第二个代表竖直方向上的位置。

例如:50% 50% 就代表图片的右上角在块元素的正中心。

猜你喜欢

转载自blog.csdn.net/rt5476238/article/details/85327310