| background-size | 设置背景图片的大小 | auto | auto | i | 设置背景的定位区域 这里有一些给你，展示一下background的常见属性用法： <style>
.div1 {
width: 100px;
height: 100px;
background-color: black;
background-image: url('img1');
background-size: 50%;
background-repeat: no-repeat;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="image" data-src="https://user-gold-cdn.xitu. io/2020/ 1/12/16f98e961c58a3ab ?imageView2/ 0/w/1280/h/960/format/webp/ignore-error/1" height="20" data-width="302" data-height="300 " /> (1) word: backgroundcolor: <style>
.div1 {
width: 100px;
height: 100px;
background-image: url('img1');
background-size: 50%;
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 背景颜色：#000； (3) RGB 颜色模式： backgroundcolor: rgb( 0, 0, 0); backgroundimagebackgroundimage❙❀ : url('')- 您还可以同时设置多个图像. 详情请参见高级章节-多背景图片
backgroundsize 背景图片大小 (1) 百分比：background -size: 100%; （2）像素值：背景大小：100px； - 当只有一个值时，默认为宽度，高度自适应比例。
background-repeat重复背景图片
（1）repeat（重复）： (2) 重复-x（水平重复）：背景重复 : 重复 x; (3) 重复 y (垂直重复): 背景重复: 重复-y;) 无重复 (不重复): 背景重复:不重复；背景高级更多背景图片背景图片在CSS元素中只能添加一张图片。2.1.然而，在 CSS3 中我们可以向元素添加多个背景图像。它的兼容性如下图所示： ![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() - 可以设置多张背景图，每张都有单独的样式，对应的样式之间用逗号分隔
<style>
.div1 {
width: 100px;
height: 100px;
background-color: black;
background-image: url('img1'), url('img2');
background-size: 50%, 100%;
background-repeat: repeat-x, no-repeat;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() <style>
.div1 {
width: 100px;
height: 100px;
background-color: black;
background-image: url('img1'), url('img2'), url('img3');
background-size: 50%, 30%;
background-repeat: repeat-y, no-repeat;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 多背景图片汇总： - 背景图片的有效样式为该图片在属性值中的位置对应的值；
- 如果属性值小于背景图片的数量，则没有对应的值。图像风格基于第一个值；
- 背景图像的层次从左到右逐渐降低。当然，最低级别是
backgroundcolor；
backgroundgradient backgroundimage：线性渐变背景渐变基于backgroundimage设置。有关具体语法详细信息，请参阅 MDN。其兼容性如下图所示： ![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 背景图：线性渐变 路径渐变（方向可手动设置，默认从下到上） - 线性渐变（ ）的使用如下如下：（参见MDN）详细信息：用角度值指定渐变的方向
： [左 | 左]右] || [顶部|底部] ： [ | ]? - 示例：背景：线性渐变(left, #333, #333 50%, #eee 75%, #333 75%);
<style>
.div1 {
background-image: linear-gradient(#71c9ce, #e3fdfd);;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 背景图像：径向渐变径向渐变- radial-gradient用法如下：（详情请参见MDN）
radial-gradient( [ [ellipse | Circle] || [ | ] [ at ] ? ] ? [, ]+ ) = 最近的角 |最近的页面 |最远的角落|最远边 ： [ | ]? - 示例：背景-image: 径向渐变(椭圆最远角在 45px 45px, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
<style>
.div1 {
background-image: radial-gradient( #71c9ce, #e3fdfd);;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() <style>
.div1 {
background-image: repeating-linear-gradient(45deg, #71c9ce 20px, #a6e3e9 30px, #e3fdfd 40px);
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="image" data-src="https://user-gold-cdn.xitu.io/2020/1/12/16f98e966aba86d8?imageView12/0/ww /h/ 960/ format/webp/ignore-error/1" height="20" data-width="285" data-height="275" />背景图片：repeating-radial-gradient 重复径向渐变
<style>
.div1 {
width: 100px;
height: 100px;
background-color: black;
background-image: repeating-radial-gradient(circle, #90ade4 ,#3350ba 20%);
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 背景 定位背景位置在讲下面的内容之前，我们先来了解一下一个元素涉及到的三个字段，请看图↓![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 上图中的三个方框分别是内容- box（内容框）、padding-box（填充框）和
<style>
.div1 {
background-image: radial-gradient( #71c9ce, #e3fdfd);;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() border❀❝ 框） border-box 是占据的面积border。集合元素的，位于padding和tttpadding box的外层是设置元素 padding 占用的面积为位于内层 border 和外层 t content-box
元素的 padding 所占用的区域 被 内容 包围背景位置。默认位置是盒子的左上角padding-box。![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() (1) 百分比 (%) (2) 像素 (px) (3) 位置 (左下 | 中心 ) 仅设置一个值时，第二个值默认为 center 或 50%。 padding-box 盒子左上角的坐标为 (0, 0) / (left, top)，右下角的坐标为 (100, 100) / (right, Bottom)。 demo <style>
.div1 {
width: 100px;
height: 100px;
background-image: url('img1');
background-size: 50%;
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<div class="div1"></div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() Background-repeatbackground-repeat 除了常规的repeat、repeat-x、repeat-y和no-repeat之外，CSS3中还添加了两个新值： 空间和圆形。它的兼容性如下图所示： ![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]()
- 当背景图片小于容器时
background-repeat:space在不缩放的情况下尽可能重复图片，并将空间中心等分图像
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() background -repeat:round 拉伸图像以填充容器，同时尽可能重复图像
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]()
- 当背景图像大于容器时
background-repeat 不存在时缩放 前提下，裁剪图片，只保留容器内的部分
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="image" data-src="https://user-gold-cdn.xitu.io/2020/ 1/12/ 16f98e969e234b0e?imageView2/ 0/w/ 1280/h/960/format/webp/ignore-error/1" height="20" data-width="596" data-height="564" />背景-重复：圆形 缩小图像以填充容器且长宽与容器大小匹配（未缩放，图像很可能变形）
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 背景相对位置background-origin background-origin 属性规则 背景位置 属性所在的相对位置。属性值共有三个：content-box、padding-box、
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]()
、
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 、❀和默认值填充盒 。其兼容性如下： ![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() background-origin: content-box（下图显示内边距设置：20px）
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="image" data-src="https://user - gold-cdn .xitu.io/2020/1/12/16f98e96ca80d1bc?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" height="20" data-width="700" data-height ="682" />background-origin: padding-box
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() background-origin: border-box
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]()
背景绘图区域 backgroundclipbackgroundclipbackgroundclip指定背景，默认值为border-box，其属性值与background-origin相同，但性能却有很大不同。如下：![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() background-clip：内容框
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="image" data-src="https://user-gold-cdn.xitu.io/2020/1/12/16f98e96f1e720bf? imageView2/0/w/1280/h/960 /format/ webp/ignore-error/1" height="20" data-width="654" data-height="672" />背景剪辑：填充框
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() - 背景剪辑：边框-box`
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]()
Background-size我认为这个特征很常见。事实上，它也是CSS3中最近添加的一个属性。在CSS2.1中，无法设置背景图片的大小。backgroundsize 除了常规设置大小和百分比外，还有两个特殊属性：contain❙ 和 s ize:contain当图像长和宽不同时，图像缩小直至完全适合内容区域。这主要在背景图像大于元素时使用。
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="图像" data-src="https://user-gold-cdn.xitu.io/2020/1/12/16f98e96f66b3c62?imageView2/0/w/1280/h/960/format/ webp/ignore-error/1" height="20" data-width="596" data-height="588" />
background-size: cover 当图像长宽不同时，按图片按比例放大，直到短边完全贴合内容区域，使背景图完全覆盖背景区域 多用于背景图小于元素的情况
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 背景固定背景附件 有时在某些情况下网站在滚动页面时看到背景图像是固定的。这是使用 背景附件：固定完成的。（默认） 扩展属性背景：元素一个特殊的扩展属性，作为一个惊喜另一个surprise元素，意思是Nosurprise!不过，这个属性只能被FireFox 4+浏览器使用，并且需要浏览器前缀。 background: element(#id)- demo1 当背景为非图像元素时，背景样式与原元素相同
<style>
.div {
width: 200px;
height: 200px;
background: element(#button) no-repeat;
background: -moz-element(#button) no-repeat;
}
#button {
width: 150px;
height: 20px;
margin: 50px;
color: #0470f4;
}
</style>
<body>
<div class="div1">
<button id='button'>这是按钮</button>
</div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() " alt="image" data-src="https: //www.菜鸟学园. com/wp-content/uploads/2020/02/10eb1a973f706fee30e6a74d946867d9.gif" height="20" data-width="322" data-height="260" />- 是作为背景查看的图像 demo2 ，背景图片不随原图大小和风格变化，但依然支持平铺等背景样式
<style>
.div {
width: 200px;
height: 200px;
border: 10px dashed #0ff;
background: element(#img1);
background: -moz-element(#img1);
}
#img1 {
width: 50px;
}
</style>
<body>
<div class="div1">
<img id='img1' src='img1' />
</div>
</body>
复制代码
![CSS Background进阶：渐变、多背景、定位、重复、相对位置…]() 作者：正彩云前端团队
链接：https://juejin.im/post/5e1adb826fb9a02fc160a2c1
来源：掘金
版权归作者所有。商业转载请联系作者授权。非商业转载请注明出处。 |
code前端网
