css3 背景记_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

css3 背景记_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

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背景完。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles