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

最新推荐文章于 2024-07-03 09:29:05 发布
最新推荐文章于 2024-07-03 09:29:05 发布
阅读量896 收藏 1
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiezhongyu2010/article/details/113984745
版权
本文探讨了CSS中`background-size`属性的两种常见值`100% 100%`和`cover`的区别。`100% 100%`会按容器比例填充图片，可能导致图片变形，而`cover`则保持图片比例，裁剪超出容器的部分。在选择使用哪种方式时，需权衡图像质量与内容可见性。个人认为`cover`在保持图片比例方面更优。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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-size:100% 100% 时 background-position: % 失效
weixin_30487201的博客
04-30 1363
背景知识： background-size background-position 难题： background-size 为 100% 100% 时，background-position 部分失效； 示例 <div class="content">content</div> .content { width: 200px; height: 200px; ...
[转]完美的背景图全屏css代码 – background-size:cover?
weixin_30498921的博客
03-16 2582
写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域 保持图像的纵横比（图片不变形） 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例 方法一、最简单，最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和...
background-size中，100%和cover的区别
hsany330的专栏
05-25 1716
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(根据图片原来的比例，以及现有的宽度，来确定高度)  
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
kfepiza的博客
02-17 9918
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);
.login { display: flex; justify-content: center; align-items: center; height: 100%; background-image: url("../assets/image/login.jpg&quot;); background-size: cover; }为什么页面只占屏幕的一半
03-17
此外，背景图片设置为cover，应该会覆盖整个容器。 接下来，我需要考虑height: 100%的具体作用。height: 100%意味着元素的高度将等于其父元素的高度。如果父元素的高度没有明确设置，那么百分比高度可能无法生效。...
css中background-size属性使用介绍
09-25
在CSS中，`background-size`属性是一个非常重要的样式，它用于控制背景图像的尺寸，从而影响元素背景的显示效果。这个属性允许我们精确地设定背景图像的宽度和高度，或者使用预定义的值来实现特殊效果。以下是关于`...
body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url('背景.jpg&#39;); background-size: contain; // 修改此处属性为 'contain' background-repeat: no-repeat; background-position: center; background-color: #f0f0f0; // 可选添加备用颜色填补边缘 font-family: 'Arial', sans-serif; overflow-x: hidden; animation: fadeBackground 3s ease-in-out forwards; }我的背景为什么只显示一点 而不是显示全部？ 帮我解决它
最新发布
03-31
从你的描述来看，背景图片只显示一部分而不是全部的原因可能是以下几种情况之一导致的： 1. **background-size: contain**的作用：当你使用`contain`时，CSS引擎会按比例缩放背景图片，使得图片完全显示在容器内部...
html::after { position: fixed; top: 0; right: 0; left: 0; bottom: 0; content: ''; display: block; background-attachment: fixed; background-size: cover; background-position: center; }
06-02
这是一段 CSS 代码，应该是用于实现全屏背景图片的效果。具体来说，它定义了一个伪元素 "::after"，并对该元素设置了一些样式，包括固定定位、覆盖整个屏幕、背景图片填充整个元素、背景图片居中等等。这段代码的...
background-image 里面图片放大
weixin_42598278的博客
02-15 1134
在CSS的background-image属性中放大图片可以通过background-size属性来实现。例如，将background-size设置为cover可以将图片放大以完全覆盖元素的背景。另外，也可以使用background-size: contain属性将图片放大到适合元素的大小，同时保持其原始宽高比。如果想要更加精细的控制，可以使用具体的尺寸值来调整background-size属性，...
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
热门推荐
houyanhua1的专栏
03-21 5万+
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 417
CSS——background-size：100% 100%; 和 background-size：cover; 区别
background-size值为cover和值为100%的区别
zengyonglan的博客
01-06 8807
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 7861
昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。 看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。 一、背景区域和背景图像宽高比例相等 在div中，设置其背景图像，如果
background的图片大小
m0_47999208的博客
01-15 892
background-size的几种取值
gcyaozuodashen的博客
12-04 2792
3、background-size:cover: 图片保持比例放大或缩小使X轴Y轴都铺满整个容器，但图片超出容器部分会被剪裁掉，图片不变形。4、background-size:contain: 图片保持比例放大或缩小，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。2、background-size:100% 100%: 图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值