Maison> interface Web> tutoriel CSS> le corps du texte

CSS如何让背景图片不重复

藏色散人
Libérer: 2023-01-04 09:38:22
original
15211 Les gens l'ont consulté

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

CSS如何让背景图片不重复

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

推荐:《css视频教程

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

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

css设置背景不重复

设置背景图片样式。创建

Copier après la connexion

20a84d7cd3822a9317bc2d85eff5b14.png

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

f8cbad4be89808f069fc09663a60bca.png

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

e17e785a645c7abbb26d2387b062160.png

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

be439b7443855d96cab96a9dc283f3e.png

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

所有代码:





css设置背景不重复


设置背景图片不重复
Copier après la connexion

dbcfa3559a4905139e4a178f8e03404.png

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!