background-size: contain;与background-size: contain;的区别

时间: 2023-04-06 10:05:07 浏览: 129

background-size使用详解

背景图片大小设置是网页设计和前端开发中一项重要的技能。在CSS中，我们可以使用background-size属性来控制背景图片的大小和拉伸方式，以适应网页布局的需要。background-size属性提供了多种设置方式，包括具体的长度值、百分比、以及两个特定的关键字：cover和contain。下面，我们将详细介绍background-size属性的各种用法。我们需要了解background-size属性的基本语法： ``` background-size: auto | <length> | <percentage> | cover | contain; ``` 1. auto是该属性的默认值，表示背景图片的尺寸将保持其原始的大小，不进行任何缩放。此时，图片的尺寸将取决于其本身设计的大小。 2. <length>值可以设置为一个或两个长度值。当设置两个值时，第一个值用于指定背景图片的宽度，第二个值用于指定高度。如果只设置一个值，那么这个值将应用在宽度上，高度则保持原始比例进行等比缩放。长度单位可以是px（像素）、em（相对单位）、%（百分比）等。 3. <percentage>值则相对于其父元素的尺寸来确定背景图片的尺寸。可以为背景图片设置一个或两个百分比值。与长度值类似，一个值时应用于宽度，另一个值应用于高度。百分比的取值范围是0%到100%。 4. cover是一个关键字，用于将背景图片等比放大，以填满整个元素的背景区域，同时保持图片的宽高比。如果图片的原始尺寸小于容器尺寸，图片将被放大到足够大以完全覆盖容器的背景，可能会导致图片部分区域被裁剪。 5. contain是另一个关键字，它的作用是将背景图片等比缩放，直到图片的任一边紧贴容器的相应边界。图片大小会适应容器的尺寸，但不会被拉伸或压缩失真，保持图片的完整性，可能造成图片未完全覆盖整个背景区域。在实际应用中，我们可以使用下面的代码样例来实践这些设置： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片大小</title> <style type="text/css"> .demo { background: url("***") no-repeat; width: 300px; height: 140px; border: 1px solid #999; background-size: cover; /* 将背景图片设置为cover */ } </style> </head> <body> <div class="demo"></div> </body> </html> ``` 在这个例子中，我们创建了一个类名为“demo”的div元素，并使用了包含cover关键字的background-size属性。通过这种方式，背景图片将被缩放以覆盖整个div元素，但同时保持其原有的宽高比例。根据上述知识点，我们可以总结如下： - auto值适用于不需要改变背景图片原始尺寸的情况。 - <length>值适用于对背景图片尺寸有具体尺寸要求的情况。 - <percentage>值适用于需要根据父元素尺寸动态调整背景图片大小的情况。 - cover关键字适用于需要背景图片完全覆盖元素背景，但可能牺牲部分图片可见性的场景。 - contain关键字适用于保持图片完整性，且不介意背景区域可能未完全被图片覆盖的场景。理解并掌握background-size属性的用法，对于进行响应式设计和优化用户体验是非常有帮助的。通过实际操作和代码测试，开发者可以更加灵活地控制网页中背景图片的表现形式，创造出既美观又符合设计要求的网页效果。

抱歉，我可以回答这个问题。正确的写法应该是background-size: contain;与background-size: cover;的区别。background-size: contain;会将背景图像缩放到完全适合背景区域，但是可能会留下空白区域。而background-size: cover;会将背景图像缩放到完全覆盖背景区域，但是可能会裁剪掉部分图像。

阅读全文

background-size: contain;与background-size: contain;的区别

相关推荐

css中background-size属性使用介绍

CSS3之背景尺寸Background-size使用介绍

background-size:auto

background-size: auto; 未生效

background-size: 设置覆盖用哪个;

background-size: 20px 15px;

background-size: 100% 100%;

background-size: contain;

background-size: contain

background-size: contain时图片高清无损，但是无法沾满整合容器，background-size: cover可以沾满容器但是不高清。我现在想要高清的同时沾满容器，也就是说我要使用background-size: contain的同时沾满容器

.el-tree-node:not(.level-1) .el-tree-node__expand-icon::before { content: ""; background-image: url("../../../icons/png/tree-open1.png"); /* 第三套自定义图片的路径 */ background-size: contain; display: inline-block; width: 16px; height: 16px; margin-right: 8px; }未生效

一个C-S模版，该模版由三部分的程序组成

最新推荐

一个C-S模版，该模版由三部分的程序组成

Android -「安卓端」 广告配音工具用于语音合成助手/自媒体配音/广告配音/文本朗读

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能

"互动学习：行动中的多样性与论文攻读经历"

Fluent UDF进阶秘籍：解锁高级功能与优化技巧

在Vue项目中，如何利用Vuex进行高效的状态管理，并简要比较React中Redux或MobX的状态管理模式？

Android -「安卓端」广告配音工具用于语音合成助手/自媒体配音/广告配音/文本朗读