背景图片全屏适应的两种方法，background-size: cover； 或者（background-size: 100% 100%；）

最新推荐文章于 2024-07-03 09:29:05 发布
原创 最新推荐文章于 2024-07-03 09:29:05 发布 · 957 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #前端

本文探讨了CSS中`background-size`属性的两种常见值`100% 100%`和`cover`的区别。`100% 100%`会按容器比例填充图片，可能导致图片变形，而`cover`则保持图片比例，裁剪超出容器的部分。在选择使用哪种方式时，需权衡图像质量与内容可见性。个人认为`cover`在保持图片比例方面更优。 
background: #000 url(img1.jpg) no-repeat fixed center center;

background-size: cover; 或者（background-size: 100% 100%;）

          注意要写好background之后再写background-size，否则会没用，切记，这儿浪费了我一个多小时时间

     

100%和cover两者的区别大致如下

          background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器

background-size：100% 100%;---按容器比例撑满，图片变形；

在这里插入图片描述

background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

在这里插入图片描述

          我个人感觉那个background-size：100%，100%； 效果好点

          原图

在这里插入图片描述

常用的background背景属性详细~~干货
weixin_74308843的博客
02-27 3209
background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式： 当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
background-size属性解释
2301_76665464的博客
10-02 1281
然而，宽度因为父容器的高度等比放缩，从而适应屏幕，而此时高度损失有所变化。例：若父容器为1000px*500px，所引图片为1000px*1000px,则显示图片如下（虚线内不显示）将引入图片放缩，来适用父容器（取决于父容器的width与height哪个大)，铺满整个父容器，裁掉多余部分。若父容器·为2000px*500px，所引图片为1000px*1000px，则显示图片如下（虚线内不显示）该百分比是指的所引图片占父容器的百分比，所以第一个100%指的是所引图片宽度占屏幕100%
background-size中，100%和cover的区别
hsany330的专栏
05-25 1777
background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器 background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 当为百分比的时候，100%和100%，100%也会显示不一样的效果： background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩
在设置背景图片全屏时background-size: 100% 100%；和background-size: 100%；的区别，一个100%和两个100%的区别
雾隐雾现的至渝博客
02-23 3万+
                              background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)  
-webkit-background-size: cover; -o-background-size: cover; background-size: cover;
08-14
CSS 中 `background-size: cover` 是一种常用的背景图像缩放方式，用于确保背景图像覆盖整个元素容器，同时保持图像的宽高比。在实际开发中，为了实现更好的浏览器兼容性，尤其是在较旧版本的浏览器中，通常需要添加...
background-size: cover; position: fixed; height: 100%; width: 100%; 解释一下分别什么意思
09-27
我们正在解释CSS代码中四个关键属性的含义，这些属性组合使用可以实现全屏背景效果。 根据用户提供的引用和之前的问题，我们将逐个解释这些属性。 1. background-size: cover; - 作用：设置背景图片的尺寸，使其...
background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh;
最新发布
10-13
`background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh;` 这些属性组合主要用于创建一个占据整个视口高度、背景图片完全覆盖容器且内容在容器中垂直和水平居中的...
width: 100%; height: 100vh; background-image: url(../../assets/bg.png); background-position: center; background-repeat: no-repeat; background-size: 101% 100%; -moz-background-size: 101% 100%; position: relative;样式解释
09-01
`是一种常用的使背景图片覆盖整个元素的方法，但这里使用的是具体百分比（101% 100%），效果类似，都是为了确保背景覆盖且不留空白[^1][^2]。 - 使用`-moz-background-size`是为了兼容旧版Firefox[^2]。 注意：引用...
html background-size:cover 什么意思
04-11
`background-size: cover` 是一种用于调整背景图片尺寸的方式。它确保背景图片按比例缩放，使其完全覆盖容器区域[^2]。即使图片经过缩放后超出了容器边界，也会保持其原始宽高比不变。因此，在某些情况下可能会裁剪...
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
kfepiza的博客
02-17 1万+
background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);
background-size:100% 100% 时 background-position: % 失效
weixin_30487201的博客
04-30 1394
背景知识： background-size background-position 难题： background-size 为 100% 100% 时，background-position 部分失效； 示例 <div class="content">content</div> .content { width: 200px; height: 200px; ...
background-image 里面图片放大
weixin_42598278的博客
02-15 1224
在CSS的background-image属性中放大图片可以通过background-size属性来实现。例如，将background-size设置为cover可以将图片放大以完全覆盖元素的背景。另外，也可以使用background-size: contain属性将图片放大到适合元素的大小，同时保持其原始宽高比。如果想要更加精细的控制，可以使用具体的尺寸值来调整background-size属性，...
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
热门推荐
houyanhua1的专栏
03-21 6万+
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box { width: 500px;
CSS——background-size：100% 100%； 和 background-size：cover； 区别
qq_43201350的博客
07-03 542
CSS——background-size：100% 100%; 和 background-size：cover; 区别
background-size值为cover和值为100%的区别
zengyonglan的博客
01-06 8823
background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。IE8及以下版本用滤镜来兼容background-size如下:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizi
4种CSS实现全屏背景图片铺满自适应的方式，最后一种尤其简单
(黎子)人生编码
06-17 2万+
在Web设计中，背景图片是提升页面视觉效果的重要元素。实现背景图片全屏铺满且自适应是常见的需求。本文将介绍三种CSS技术，用以确保背景图片能够优雅地填充整个屏幕并适应不同设备。
CSS 的background-size：cover属性值和contain属性值
单枪匹码
12-12 1万+
1、语法：background-size：length|percentage|cover|contain； 2、参数：参考文章：菜鸟教程 3、浏览器支持： 4、标签定义及使用说明： 5、通常情况下都是使用第1个和第2个属性值，那么后两个如何使用呢？我们来写一个小demo记录一下： <div id="div4"></div> #div4{ width: 1000px...
css中background-size属性cover、contain、100%的含义案例详解
wangyining070205的博客
02-14 8165
昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。 看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。 一、背景区域和背景图像宽高比例相等 在div中，设置其背景图像，如果
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值