html/css插入base64背景图片

最新推荐文章于 2025-04-17 08:51:36 发布

oO斯曼

最新推荐文章于 2025-04-17 08:51:36 发布

阅读量6.2k

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/sman19999/article/details/121390363

版权

本文介绍了一种使用HTML和CSS实现网页布局的方法，包括如何设置背景图片、调整元素位置及大小等技巧。通过具体示例展示了如何利用CSS样式属性如background-image、position等进行页面美化。

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

<!DOCTYPE html>
<html>

<head>
<title>背景图片.html</title>
<meta charset=UTF-8">
   <style type="text/css" >
   html {
   height: 100%;
   }
   body {
   width：100%；
   height: 100%;
   background-image: url(data:image/png;base64,base64编码的png图片数据 );
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

div{

border: 1px solid red;

width: 200px;

height: 200px;

position: absolute;

right: 200px;

bottom: 200px;

}

</style>
</head>
<body>
<!--
data表示取得数据的协定名称,image/png是数据类型名称,base64 是数据的编码方法,
逗号后面是image/png文件base64编码后的数据. 可直接当路径地址用。
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

data:image/x-icon;base64,base64编码音乐数据
-->

<br>

<p style="position: absolute;right: 200px;bottom: 200px;">这样配置段落的位置移动</p>

<div>
<p>这是div块的位置</p>
</div> 

</body>  
</html>