Css中background怎么用


这篇文章给大家分享的是有关Css中background怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. background-color

所有元素都能设置背景颜色。

background-color默认值transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。

2. background-image

所有元素都能设置背景图像;

背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。

3. background-repeat

repeat(默认)/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll(默认)/fixed

5. background-position

像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%

百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%

关键字法:toprightbottomleftcenter进行组合定位;若只规定一个值,第二个值默认为center

注意:background-position可以为负值。

在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。

6. background-size

设置背景图像的尺寸;默认值auto

像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto

百分比法:以父元素的宽度和高度以基准来计算。

关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。

关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。

7. background-origin

定义背景图像的初始位置

border-box,边框左上角。

padding-boxpadding区域左上角;默认值。

content-box,内容区左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes th免费云主机域名ree different values:

border-box – (default) the background is painted to the outside edge of the border

padding-box – the background is painted to the outside edge of the padding

content-box – the background is painted within the content box

(英文的解释得比较清楚)

(英文都是从W3Schools Online搬运)

关于background-originbackground-clip,它们是相互独立的,互不干扰。

关于backgroundCSS写法,个人认为应该逻辑明确、层次分明;具体而言:

background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。

感谢各位的阅读!关于“Css中background怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: 怎么获取小程序新增或活跃用户的画像分布数据

这篇文章主要介绍了怎么获取小程序新增或活跃用户的画像分布数据的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么获取小程序新增或活跃用户的画像分布数据文章都会有所收获,下面我们一起来看看吧。 免费云主机域名获取小程序新增或活跃用户的…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/10 17:00
下一篇 01/10 17:00

相关推荐