background-image 背景平铺方式、 CSS3 background-size背景图像大小
background-image 背景平铺方式、 CSS3 background-size背景图像大小
background-image 背景平铺方式
body样式
<body>
<div class="box"></div>
</body>css样式
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 1000px;
border: 3px solid pink;
margin: 20px auto 0;
background-image: url(./img/bj1.jpeg);
background-repeat: no-repeat;/* 设置背景图的大小 */
/* 100px 120px 指定背景图宽度100px 高度120px */
/* background-size: 100px 120px;*/
/* 只给一个值 100px是背景图的宽 高度自适应 */
/* background-size: 100px; */
/* 50% 80% 表示宽是50%，高是80% */
/* background-size: 50% 80%; */
/* 100% 100% 背景图的宽是100% 高是100% 会全部显示出来，但有可能图的比例失调 （压扁）*/
/* background-size: 100% 100%; */
/* cover 表示按照图的纵横比，显示的可能是图的一部分 */
/* background-size: cover; */
background-size: contain;
}
</style>效果
background-size指定 背景图像的大小。
CSS3以前，背景图像大小 由 图像的实际大小 决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
语法：
background-size: length|percentage|cover|contain;
background-size: length 设置背景图片高度和宽度。
background-size: 80px 60px; 指定背景图宽度是80px，背景图高度是60px；
body样式
<body>
<div class="box"></div>
</body>css样式
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 1000px;
border: 3px solid pink;
margin: 20px auto 0;
background-image: url(./img/bj1.jpeg);
background-repeat: no-repeat;
/* 设置背景图的大小 */
/* 100px 120px 指定背景图宽度100px 高度120px */
/* background-size: 100px 120px;*/
/* 只给一个值 100px是背景图的宽 高度自适应 */
/* background-size: 100px; */
/* 50% 80% 表示宽是50%，高是80% */
/* background-size: 50% 80%; */
/* 100% 100% 背景图的宽是100% 高是100% 会全部显示出来，但有可能图的比例失调 （压扁）*/
/* background-size: 100% 100%; */
/* cover 表示按照图的纵横比，显示的可能是图的一部分 */
/* background-size: cover; */
background-size: contain;
}
</style>效果
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)