Heim > Web-Frontend > CSS-Tutorial > Hauptteil

怎么在css上设置背景图

青灯夜游
Freigeben: 2021-11-09 14:17:28
Original
72676 Leute haben es durchsucht

在css上设置背景图的方法:1、使用background-image属性,语法“background-image:url(图片url);”;2、使用background属性,语法“background:url(图片url);”。

怎么在css上设置背景图

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

在css中,可以通过background-image属性或background属性来设置背景图片。

background-image属性用于设置一个元素的背景图像;元素的背景是元素的总大小,包括填充和边界(但不包括边距)。默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 450px;
				height: 360px;
				background-image: url(img/1.jpg);
				background-size: 450px;/*设置图片大小*/
			}
		</style>
	</head>

	<body>
		<div></div>
	</body>
</html>
Nach dem Login kopieren

1.png

而background属性是一个简写属性,可以在一个声明中设置所有的背景属性,包括:

  • background-color 指定要使用的背景颜色

  • background-position 指定背景图像的位置

  • background-size 指定背景图片的大小

  • background-repeat 指定如何重复背景图像

  • background-origin 指定背景图像的定位区域

  • background-clip 指定背景图像的绘画区域

  • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

  • background-image 指定要使用的一个或多个背景图像

示例:

div {
	width: 450px;
	height: 360px;
	background: url(img/2.jpg);
	background-size: 450px;/*设置图片大小*/
}
Nach dem Login kopieren

2.png

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt von怎么在css上设置背景图. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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!