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

编程知识 行业动态 更新时间:2024-06-13 00:19:45

通过引用css类来实现图片的添加并设置:

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

类型一:(√)

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

类型二:

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

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

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

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

2、如何引用这些类
在html元素标签中将class的类名写入就行,比如

更多推荐

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

本文发布于:2023-03-28 19:07:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/48cea8f19ee4d0c4688fce5971448da1.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:网页代码   图片   html   css

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!