html网页代码中，通过css类引入图片并设置

笑喵人生

已于 2023-01-15 16:42:17 修改

阅读量9.9k

点赞数 1

分类专栏： HTML5 文章标签： css html

于 2021-04-18 00:52:37 首次发布

本文链接：https://blog.csdn.net/qq_37723186/article/details/115799581

版权

6 篇文章

订阅专栏

本文介绍如何在HTML页面中通过引用CSS类来添加和设置图片。首先，需要在CSS文件中创建一个自定义类，可以采用直接导入图片、背景图引入等方式。然后，在HTML元素中通过class属性应用这个类。要注意的是，图片的高度和宽度样式应在引入图片的CSS规则前设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先创建一个css文件添加一个自定义导入图片类（或者在原有的css文件中添加一个自定义要导入图片的类）

类型一：（√）

.vip {	padding-top: 10px;	//内边距
		width：100px;	//宽度
		height：50px;	//高度
		content:url(https://www.你的网址.com/images/vip.png);//图片文件地址
}

类型二：

.vip2:before {	//关于html中：before用法可自行百度
				content:url(https://www.你的网址.com/images/vip.png);
}

类型三：(背景图引入和第一个差不多)

.vip3 {	padding-top: 10px;	//内边距
		width：100px;	//宽度
		height：50px;	//高度
		background-image: url('https://www.你的网址.com/images/vip.png');//图片文件地址
}

需要注意的是，关于高度宽度这些设置需要在引入图片前面设置，如果放在后面将不起作用。（看情况）

2、如何引用这些类
在html元素标签中将class的类名写入就行，比如
在这里插入图片描述