[分享]css中如何设计背景不平铺

CSS设计中，背景采用平铺（repeat）模式是一种常见的做法。但是，在一些情况下，我们需要设置非平铺背景，这就需要使用backgroundrepeat属性的其他取值。假如我们有一个宽度为300px，...

CSS设计中，背景采用平铺（repeat）模式是一种常见的做法。但是，在一些情况下，我们需要设置非平铺背景，这就需要使用background-repeat属性的其他取值。
假如我们有一个宽度为300px，高度为200px的div容器，我们想要设置一个400px宽，300px高的背景图片，但是不希望其进行平铺，而是在容器中居中展示。我们可以这样写CSS:

<style>
    .no-repeat{
        width: 300px;
        height: 200px;
        background-image: url("bg.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 400px 300px;
    }
</style>

<div class="no-repeat"></div> 

代码解释：
background-repeat: no-repeat表示不重复平铺。background-position: center center将背景图置于容器中心。background-size: 400px 300px设置背景图大小。
需要注意的是，background-size为设置背景图片的显示大小，而非实际大小。所以，如果背景图片不够大，可能会产生模糊等问题。
总的来说，CSS中设计不平铺背景需要使用background-repeat属性的其他取值，如no-repeat等，并通过background-position和background-size等进一步设置。