background-size 用法详解_html/css_WEB-ITnose
background-size属性用法详解:
此属性用来控制控制背景图片的大小，下面通过代码实例详细介绍一下此属性的用法，希望能够对需要的朋友带来一定的帮助。
Background-size属性具有两个参数（在这里先不把cover和contain计算在内），参数值既可以是精确数值形式也可以是百分比形式，也可以是默认的值auto，例如:
background-size:200px 100px;background-size:50% 50%;background-size:auto;
下面对Background-size属性的参数做一下简单的介绍:
如果只有一个参数，那么此值用来规定背景图片的宽度，这个时候背景图片的高度值是按照宽度进行等比例缩放。
如果提供两个参数，那么第一个参数用来规定背景图片的宽度，第二个参数用来规定背景图片的高度。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; } .test{ background-image:url(mytest/demo/small.jpg); background-size:200px 100px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>Background-size属性带有两个参数，第一个参数规定背景图片的宽度为200px，第二个参数规定背景图片的高度为100px。
再看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .first{ background-image:url(mytest/demo/small.jpg); background-size:200px; background-repeat:no-repeat; } .second{ background-image:url(mytest/demo/small.jpg); background-size:600px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="first"></li> <li class="second"></li> </ul> </body> </html>以上代码中，Background-size属性之规定了一个参数，那么这个参数用来规定背景图片的宽度，背景图片的高度根据宽度值进行等比例缩放，如果背景图片的尺寸超过容器，将会被裁切。
Background-size属性值如果是auto的时候，就是背景图片按照原尺寸显示，这里就不用实例演示了。
下面再来介绍一下此属性的cover和contain属性值。
一.cover属性:
将属性值设置为cover之后，将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。
cover的英文也有覆盖的意思，说这一点就是有助于大家的记忆和理解。
代码实例如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .test{ background-image:url(mytest/demo/small.jpg); background-size:cover; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>在以上代码中，背景图片可以最小程度的完全覆盖容器，如果背景图片的和容器的长宽比例不一样，那么必然会出现在横向或者纵向上超出容器的情况，那么超出的将会被隐藏。
一.contain属性:
此属性值可以将背景图片放大或者缩小。
和cover属性类似，都是可以将图片等比例放大或者缩小，但是cover是最小限度的将容器的覆盖，而contain只是要求某一个方位上将容器覆盖，比如纵向或者横向能够最小程度将容器覆盖。
代码示例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .test{ background-image:url(mytest/demo/small.jpg); background-size:contain; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>在以上代码中，背景图片进行了等比例缩放，由于在纵向上能够最先达到填充容器元素，所以在横向上就放弃尝试。
原文地址是:background-size 用法详解 一章节。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1662
14
1419
52
1311
25
1261
29
1234
24
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative Overview
Apr 16, 2025 am 12:04 AM
The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
The Future of HTML, CSS, and JavaScript: Web Development Trends
Apr 19, 2025 am 12:02 AM
The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
