[分享]css内嵌式多个图片

在网页设计中，图片是非常重要的元素。使用内嵌式CSS可以很方便地添加多个图片，提高网页的视觉效果。

 <style>
        p {
            background-image: url("image1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 20px;
        }

        .box {
            background-image: url("image2.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 200px;
            height: 200px;
        }

        #banner {
            background-image: url("image3.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 300px;
        }
    </style>

    <p>这是一个带背景图片的段落。</p>

    <div class="box"></div>

    <div id="banner"></div> 

上面的代码展示了如何使用内嵌式CSS添加多个图片。为了让添加的图片显示效果更好，需要设置图片的属性。常用的图片属性包括：

• background-image：设置背景图片的URL。
• background-repeat：设置背景图片的重复方式。
• background-size：设置背景图片的宽度和高度，cover表示尽可能填满元素。
• width和height：设置元素的宽度和高度，可以用来设置显示图片的大小。

通过以上属性的设置，可以很方便地添加多个图片，并且灵活控制图片的显示效果，提高网页的视觉效果。