所有背景属性都不能继承。
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%。
关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。
注意:background-position可以为负值。
在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。
6. background-size
设置背景图像的尺寸;默认值为auto。
像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。
百分比法:以父元素的宽度和高度以基准来计算。
关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。
关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。
7. background-origin
定义背景图像的初始位置
border-box,边框左上角。
padding-box,padding区域左上角;默认值。
content-box,内容区左上角。
8. background-clip
The CSS3 background-clip property specifies the painting area of the background.
The property takes three 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-origin和background-clip,它们是相互独立的,互不干扰。
关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:
background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。
(个人见解,仅供参考)
Full Size Background Image
If we want to have a background image on a website that covers the entire browser window at all times.
The requirements are as follows:
• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:
- html {
- background: url(img_flower.jpg) no-repeat center fixed;
- background-size: cover;
- }
小tips:
利用背景图像的水平平铺,实现波浪式的边框效果。
(目前只有想法,还没找到符合需求的图像。)
以上这篇CSS background全部汇总就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- ZEN.1996-珍惜所有【华纳】【WAV+CUE】
- 群星《环球国语元素》香港首版[WAV+CUE][1G]
- 周慧敏《玉女天后》原音母版1:1直刻[WAV+CUE][1G]
- 谭咏麟《20世纪中华歌坛名人百集珍藏版》[WAV+CUE][1G]
- 炉石传说40轮盘术最新卡组代码在哪找 标准40轮盘术卡组代码分享
- 炉石传说亲王贼怎么玩 2024亲王贼最新卡组代码分享
- 炉石传说30.6.2补丁后有什么卡组 30.6.2最强卡组最新推荐
- 模拟之声慢刻CD《蔡琴名曲回顾遇听》[原抓WAV+CUE]
- BruceLiu-WAVES(MusicbySatie)(2024)2CD[24Bit-96kHz]FLAC
- KonstantinKrimmel-MythosSchubertLoewe(2024)[24Bit-96kHz]FLAC
- 2024雷蛇高校挑战赛 嘤式分解助力收官之战
- 海信发布110吋世俱杯官方定制AI电视 引领智能观赛
- 海信发布27英寸显示器大圣G5 Pro:采用自研超解析芯片、友达原厂模组
- 蔡琴《机遇》1:1母盘直刻日本头版[WAV分轨][1.1G]
- 陈百强《与你几分钟的约会》XRCD+SHMCD限量编号版[低速原抓WAV+CUE][994M]