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>