怎么使用css让背景图片不重复

这篇文章主要介绍怎么使用css让背景图片不重复，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站专注于邵东企业网站建设,响应式网站开发,商城开发。邵东网站建设公司,为邵东等地区提供建站服务。全流程按需定制开发，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

css中可使用background-repeat属性来让背景图片不重复，只需给元素添加“background-repeat:no-repeat;”样式即可；该属性可设置背景图片是否重复以及如何重复，当值为“no-repeat”时设置不重复。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中，我们可以利用 background 属性来设置背景图片，如下面的代码

	
		
		
			body {
				background: url("img/1.jpg");
			}
		
	

	
	

运行代码我们发现，背景图片无论是横向或是纵向都是重复，直至铺满整个显示区域。

那么如何让背景图片不重复？可以使用background-repeat 属性。

background-repeat 属性可以设置图片背景图片是否重复以及如何重复，它的默认值是横向和纵向都会重复。

它有四个可以设置的值，分别如下

• repeat ：默认。背景图像将在垂直方向和水平方向重复。

• repeat-x ：背景图像将在水平方向重复。

• repeat-y ：背景图像将在垂直方向重复。

• no-repeat ：背景图像将仅显示一次。

可以看出，当该属性的值为“no-repeat”时，可让背景图片不重复

css背景图片不重复

body{
    background: url("img/1.jpg");
    background-repeat:no-repeat;
}

运行结果如下图，背景图片横向以及纵向都不会重复，只会显示一张

以上是“怎么使用css让背景图片不重复”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！