CSS3背景 background-size，十天精通CSS3教程-慕课网

CSS3背景 background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

任务

在右侧代码编辑器窗口的第12行，输入正确内容使背景图片填满整个容器。

?不会了怎么办: cover是否拼写正确？

问答
评论
笔记
资料下载
代码

全部精华我要发布

背景图片的百分比问题

最新回答 / 慕容1529948

好久远我还准备回答一下

2 回答 1062 浏览

2019-08-06

background-size:auto|长度值|百分比|cover|contain“”|“”是或者的意思但是可以转变动画效果，可以将background-size属性从cover变成contain属性之类的<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style>.wrapper { width: 400px; heigh...

3 回答 1867 浏览

2022-03-24

为什么我这个没有任何变化

最新回答 / 寻Tn

可能浏览器原因，刷新试试，要么代码可能打错了

1 回答 1027 浏览

2018-03-01

设置长度值，图片会不会变形啊

已采纳回答 / 慕容8154426

<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；设置宽高会变形，只设置一个值，默认为宽度，不变形，等比缩放

1 回答 1148 浏览

2017-11-23

CSS3背景 background-size

已采纳回答 / 慕粉4342744

width为容器的50%,height为容器的50%如果要一半，要设置50% 100%

1 回答 1345 浏览

2017-11-13

background-size:cover和100%是不是没有区别

已采纳回答 / qq_蓝雪魔君_03911481

background-size：100% 100%;---按容器比例撑满，图片变形；background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变

1 回答 2219 浏览

2017-09-07

contain

+ 我来回答回答最高可+2积分

2 回答 581 浏览

2022-08-10

关于填充content-box

+ 我来回答回答最高可+2积分

2 回答 767 浏览

2022-05-25

为什么background-size:100% 100%;和background-size:100%;的效果不一样？

已采纳回答 / qq_北方有佳人_0

background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)比方说：你有一张长宽比例为4:3的图片，有一个width:100px;height:50px;的盒子(也就是长宽比例为2:1)。background-size:100% 100%;这种方式设置完背景图片的大小后，会完全铺满整个盒子，并且背景图片的比例会因此改变为2:1background-si...

3 回答 15216 浏览

2020-05-27