background-image 背景平铺方式、 CSS3 background-size背景图像大小

最新推荐文章于 2024-06-25 10:20:33 发布

正在修炼web的小芮

最新推荐文章于 2024-06-25 10:20:33 发布

阅读量6.8k

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/126016632

版权

本文介绍了CSS3中background-size属性的使用，包括如何指定背景图像的大小，如像素值、百分比以及cover值。通过不同示例展示了背景图像在不同设置下的显示效果，帮助理解如何在不同环境中自定义背景图片的尺寸。

摘要由CSDN通过智能技术生成

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% 会全部显示出来，但有可能图的比例失