Can css load images?-Front-end Q&A-php.cn

Can css load images?

青灯夜游

Release： 2022-09-16 18:28:15

Original

2276 people have browsed it

css can load images. In CSS, you can use the background-image or background attributes to load images; both attributes can be used with the url() function to set the background image for the element, with the syntax "background-image: url (picture path);" or "background : url(picture path);”.

Can css load images?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the background-image or background attribute to load images.

The background-image attribute sets the background image for the element; background is a simplified attribute that can set all background styles in one statement, including background images.

Syntax:

background-image:url(图片路径);
background:url(图片路径);

Copy after login

The url() function accepts a single parameter url, which saves the url in string format.

Note:

The background image set by the background-image or background attribute will occupy the entire size of the element, including padding and borders. , but not including margins. By default, the background image is placed in the upper left corner of the element and repeats horizontally and vertically.
The background-image or background attribute sets an image in the background of the element. Depending on the value of the background-repeat property, the image can be tiled infinitely, tiled along some axis (x- or y-axis), or not tiled at all.
The initial background image (original image) is placed according to the value of the background-position property.

Tip: Please set an available background color so that if the background image is not available, the background ribbon can be used instead.

CSS Example of loading images

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 400px;
				height: 300px;
				border: 1px solid red;
			}

			.img1 {

				background-image: url(img/1.jpg);
				background-size: 200px;
				background-repeat: no-repeat;
			}
			.img2 {
			
				background-image: url(img/2.jpg);
				/* background-size: 200px; */
			}
		</style>
	</head>
	<body>
		<div class="img1"></div>
		<div class="img2"></div>
	</body>
</html>

Copy after login

Can css load images?