html/css插入base64背景图片

最新推荐文章于 2023-09-25 14:50:45 发布

oO斯曼

最新推荐文章于 2023-09-25 14:50:45 发布

阅读量5.3k

点赞数 2

文章标签： javascript 前端 html

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

版权

<!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>

oO斯曼

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html/css插入base64背景图片

<!DOCTYPE html> <html> <head> <title>背景图片.html</title> <metacharset=UTF-8"> <style type="text/css" > html { height: 100%; }<!...
复制链接

扫一扫