怎么使用css让背景图片不重复-成都快上网建站

怎么使用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");
			}
		
	

	
	

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

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

那么如何让背景图片不重复?可以使用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让背景图片不重复

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


分享文章:怎么使用css让背景图片不重复
文章链接:http://kswjz.com/article/gcpsch.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流