CSS如何让背景图片不重复

藏色散人
Freigeben: 2023-01-04 09:38:22
Original
15210 Leute haben es durchsucht

CSS让背景图片不重复的方法:首先新建一个html文件;然后输入一个div标签,并对这个标签添加一个class类;最后通过属性“background-repeat:no-repeat;”实现背景图片不重复即可。

CSS如何让背景图片不重复

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

推荐:《css视频教程

打开html软件开发工具新建一个html文件,然后输入一个

标签对这个标签添加一个class类,用于设置背景图片的样式。如图:

css设置背景不重复

设置背景图片样式。创建

Nach dem Login kopieren

20a84d7cd3822a9317bc2d85eff5b14.png

查看页面效果。保存html页面使用浏览器打开,发现背景图片是重复的。如图:

f8cbad4be89808f069fc09663a60bca.png

设置背景图片不重复。回到html代码页面,在class类样式上添加 background-repeat: no-repeat; 如图:

e17e785a645c7abbb26d2387b062160.png

查看页面效果。保存html页面使用浏览器打开,发现背景图片是不再重复了。如图:

be439b7443855d96cab96a9dc283f3e.png

页面所有代码。可以直接复制所有代码,粘贴到新建html页面,保存后即可看到页面效果。(注意:案例中背景图片是本地路径的,粘贴代码后需要修改背景图片路径。)

所有代码:





css设置背景不重复


设置背景图片不重复
Nach dem Login kopieren

dbcfa3559a4905139e4a178f8e03404.png

Das obige ist der detaillierte Inhalt vonCSS如何让背景图片不重复. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!