css3 背景记_html/css_WEB-ITnose
css3 背景
css背景主要包括五个属性：
background-color
background-color:transparent || <color>
用来设置元素的背景颜色，默认值为transparent(透明)，可用颜色名，RGB色，hls值，十六进制值指定颜色。
background-image
background-image:none || <url>
用来设置元素的背景图片，默认值为none，可以用相对地址，也可以用绝对地址。
background-repeat
background-repeat:repeat || repeat-x || repeat-y || no-repeat
用来设置元素背景图片在元素盒模型中的铺放方式，默认值为repeat，往X轴与Y轴方向同时平铺，repeat-x只x轴方向平铺，repeat-y只y轴反向平铺，no-repeat不平铺。
background-attachment
background-attachment:scroll || fixed
用来设置元素背景图片是否固定。默认值为scroll，不固定。fixed，固定。
background-position
background-position:<percentage> || <length> || [left | center | right] [,top | center | bottom]
用来设置元素背景图片的位置，默认值为(0,0) || (0%,0%) || (left top),其值可以是具体的百分数或数值，也可以使用关键词。
在css3中，又新增了4个属性。
background-origin
background-origin属性主要用来决定background-position属性的参考原点，即决定背景图片定位的起点。
background-origin:padding-box || border-box || content-box
在浏览器的老版本中，属性值分别为padding，border，content。
padding-box(padding):默认值，决定background-position起始位置从padding的外边缘开始显示背景图片。
border-box(border):决定background-position起始位置从border的外边缘开始显示背景图片。
content-box(content):决定background-position其实位置从content的外边缘开始显示背景图片。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:padding-box; }</style></head><body> <div></div></body></html>默认情况，图片以盒子padding的左上角为起点，直到border外边缘的右下角。
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box;} 当值为border-box时，图片以盒子的border左上角为起点，直到border右下角。
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:content-box;}当值为content-box时，图片以盒子的content左上角为起点，直至border右下角。
注意：当backgroun-attachment为fixed时，background-origin将无效。
background-clip
主要用来定义背景图片的剪切区域,属性值与background-origin类似。
background-clip:border-box || padding-box || content-box
老版本属性值为border，padding。
border-box:默认值，元素背景图像从元素的border区域向外剪切。
padding-box:元素背景图像从padding区域向外剪切。
content-box:元素背景图像从content区域向外剪切。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box; background-clip:border-box; }</style></head><body> <div></div></body></html>border-box是默认值，自动剪切border之外的图像。
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box; background-clip:padding-box;}当值为padding-box时，padding之外的区域被剪掉。
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box; background-clip:content-box;}当值为content-box时，content之外的区域被剪掉。
background-size
主要用来指定背景图片的尺寸。
background-size:auto || <length> || <perentage> || cover || contain
auto:默认值，将保持背景图片的原始高度和宽度。
cover:将背景图片放大，以适合铺满整个容器。但会导致背景图片失真。
contain:保持背景图片本身的宽高比例，将背景图片缩放到宽度或高度正适应所定义背景的区域。
取值时可以设置两个，也可以设置一个。取一个值时，指定了背景图片的宽度，第二个值相当于auto，也就是高度。这种情况，能够让背景图片的高度自动按照比例缩放。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:auto; }</style></head><body> <div></div></body></html>auto是默认值，保持背景图片大小比例。
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:250px 200px;}指定宽高，改变背景图片大小。
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:50% 50%;}指定百分比时，将根据盒子宽高取值。上例中盒子宽高为300px X 200px，设置背景图片宽高为50%，那么背景图片就等于150px X 100px。
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:cover;}取值为cover时，背景图片放大填充整个盒子。
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:contain;}取值为contain时，背景图片成比例放大，直至宽或高抵住盒子。
多背景属性
在css3之前，每个容器只能指定一张背景图片，因此每当需要增加一张背景图片时，必须增加一个容器来容纳它。早期使用嵌套div容器显示特定背景的做法不是很复杂，但是它明显难以管理。它让html标记更加复杂，同时也会增加页面文件大小。如果要增加某个图片效果，不仅需要修改css还需要修改html代码。
通过css3的多背景属性，html标记就不需要任何修改，在css的background-image或则background属性中列出需要使用的所有背景图片，用逗号隔开。而且每张图片都具有background中的属性，例如可以重复，改变大小等。
background:[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] ,*
也可以把缩写拆为以下形式。
background-image:url1,url2,...,urlN;background-repeat:repeat1,repeat2,...,repeatN;background-position:position1,position2,...,positionN;background-size:size1,size2,...,sizeN;background-attachment:attachment1,attachment2,...,attachmentN;background-clip:clip1,clip2,...,clipN;background-origin:origin1,origin2,...,originN;background-color:color;
除了backgroun-color之外，其他的属性都可以设置多个属性值，不过前提是元素有多个背景图片存在。多个属性值之间必须使用逗号隔开。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left top / 50% 50%, url(https://img.alicdn.com/imgextra/i4/2406102577/TB2HT.RdFXXXXclXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right top / 50% 50%, url(https://img.alicdn.com/imgextra/i4/2406102577/TB2TxlhdVXXXXXxXXXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right bottom / 50% 50%, url(https://img.alicdn.com/imgextra/i3/2406102577/TB2orQSdFXXXXb_XpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left bottom / 50% 50%; background-color:#ff0000; }</style></head><body> <div></div></body></html>background-color属性只能有一个，切记，切记。
css3背景完。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？
Apr 04, 2025 pm 11:54 PM
GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...
