html/css插入base64背景图片
<!DOCTYPE html>
<html>
<head>
<title>背景图片.html</title>
<meta charset=UTF-8">
<style type="text/css" >
html {
height: 100%;
}<!--/*不配置html的height,显示不出body的背景图像*/-->
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;
}<!--通过设置一个div的position的值来调整div块的位置-->
</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编码音乐数据
-->
<img src="测试图片.png"/>
<img src="https://img-blog.csdnimg.cn/2022010706380633996.png"/>
<br>
<br>
<p style="position: absolute;right: 200px;bottom: 200px;">这样配置段落的位置移动</p>
<div> <p>这是div块的位置</p> </div> </body> </html>
html/css插入base64背景图片相关推荐
- [css] 如何设置背景图片不随着文本内容的滚动而滚动?
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
- [css] 如何让背景图片固定不随滚动条滚动
[css] 如何让背景图片固定不随滚动条滚动 background-attachment:fixed 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- uni-app插入本地背景图片不能超过40kb解决方法
uni-app插入本地背景图片不能超过40kb解决方法 参考文章: (1)uni-app插入本地背景图片不能超过40kb解决方法 (2)https://www.cnblogs.com/gygg/p/1 ...
- 怎么把html背景图片,css如何设置背景图片?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
- 怎么修改背景图片大小的HTML代码,css如何改变背景图片大小?
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...
- css:css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度 注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
- html中背景不平铺怎么写,css怎么让背景图片不平铺?
在使用background属性设置背景图片时,背景图片默认是重复平铺的.css怎么让背景图片不平铺?下面本篇文章就来给大家介绍一下使用CSS设置背景图片不平铺的方法,希望对大家有所帮助. 在CSS中, ...
- vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: ...
- 用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏?附源码!...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...
最新文章
- hash hashcode变化_hashmap重写key的hashcode问题
- 唯一索引和普通索引的选择
- 342.基于高通量技术的微生物组研究实验设计
- 无所不答的“自动聊天AI”
- 华为的鸿蒙系统可以装在电脑上吗_继鸿蒙系统后!华为首款台式机电脑上线:联想PC霸主地位危险了...
- kafka笔记3(生产者)
- MySQL DELETE 语句的一个简单介绍
- Engagement Center Communication timer实现逻辑
- html重绘text,使用DrawText重绘C++
- 【LeetCode】3. Longest Substring Without Repeating Characters
- 为什么我认为现阶段HIDS处于攻防不对等的地位?(ids、nta、绕过)
- stm32中断优先级_STM的中断系统
- HTML教程(完整版).pdf,HTML教程详解(完整版).pdf
- linux samba 漏洞 exp,smaba漏洞总结
- Windows软件之——RocketDock之无法拖放图标到dock栏
- 2021年江西省安全员C证考试报名及江西省安全员C证模拟考试题库
- 使用阿里的easyexcel 导入xls类型Excel文件报错问题深挖
- web前端网页设计期末课程大作业:企业网页主题网站设计——舞蹈培训11页HTML+CSS+JavaScript
- 渗透测试:密码破解小结
- 数据库-订单发票表(单表)