CSS中设置背景图时,有些情况下我们不希望它重复出现。这时,可以使用background-repeat属性来控制背景图的重复。下面我们具体来看一下。 首先,当我们设置了背景图后,如果不进行设置,它默认
body { background-image: url('bg.jpg'); /* 不进行设置,默认为 repeat */ }如果希望背景图不平铺,只出现一次,则可以将其设置为no-repeat。
body { background-image: url('bg.jpg'); background-repeat: no-repeat; }另外,如果希望背景图只在水平或垂直方向重复出现,可以使用background-repeat的x和y属性。
body { background-image: url('bg.jpg'); background-repeat: repeat-x; /* 只在水平方向重复 */ }
body { background-image: url('bg.jpg'); background-repeat: repeat-y; /* 只在垂直方向重复 */ }此外,如果背景图大小比页面小,则背景图会被平铺至页面大小。为了避免这种情况,可以使用background-size属性。
body { background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: cover; /* 拉伸铺满背景 */ }以上是CSS中设置背景图不重复的几种方法,希望对大家有所帮助。
粉丝
0
关注
0
收藏
0