1、html中可以用img标签插入图片也可以用css的background插入。具体方法是首先新建一个html文件,里面新建两个div标签,第二个标签中插入img标签并插入图片:
2、然后在上方的style标签中设置第一个div的样式,先给div长度和高度,接着是用background属性引入图片,设置图片不重复以及图片的显示位置j即可:
3、最后打开浏览器就可以看到用两种方法引入的gif的图片了:
方法:1、直接贴图:在界面上贴一个gif动态等待效果图片,gif图片获取方式:网上找素材,会ps的可以自己制作<img src="wait.gif" />
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果:
这种效果:网上有很多类似素材,可以根据需要选择,或使用上述技术绘制
下面提供一个CSS3绘制的范例
3、CSS的代码如下:
<style>
.loading {
width:0
height:0
border-right:20px solid #fff
border-top:20px solid #000
border-left:20px solid #fff
border-bottom:20px solid #000
border-radius: 20px
-moz-border-radius: 20px
-webkit-border-radius: 20px
}
.loading {
animation: bganim 0.6s linear 0s infinite
-moz-animation: bganim 0.6s linear 0s infinite
-webkit-animation: bganim 0.6s linear 0s infinite
}
@keyframes bganim {
from { transform:rotate(0deg)} to { transform:rotate(360deg)}
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}
}
</style>
4、<label>CSS3效果</label>,<div class="loading"></div>
效果如下图:运行机制很简单,先手动绘制一个静态的图,然后控制对应div进行360度旋转,即可实现
5、使用js等待效果插件(如:spin.js)
6、JS代码如下:
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
}
var target = document.getElementById('img_wait')
var spinner = new Spinner(opts).spin(target)
7、html代码的引用:<div id="img_wait"></div>
8、打开测试,效果如下
1、这个在数据库中存储img图片的地址,前台放置img服务器标签,后台读取数据库中的img图片地址赋值。
2、可以在后台进行html拼接,拼接出img标签,然后输出前台,使用Ajax,在后台写好获取数据库中img图片地址的方法。
3、前台,在页面加载时,base64码字符串传到前台转换即可展示图片:<imgsrc="data:image/jpgbase64,<%=base64Path%>"width="50%"height="50%"/>。
4、之后会再发一个带图片预览的用ajax存储图片的Demo。
5、读取时就是从数据库读取对应数据再转化成图片显示出来。
扩展资料
img元素向网页中嵌入一幅图像。
请注意,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。
<img>标签有两个必需的属性:src属性和alt属性。
<img>标签的src属性是必需的。它的值是图像文件的URL,也就是引用该图像的文件的的绝对路径或相对路径。
为了整理文档的存储,创作者通常会把图像文件存放在一个单独的文件夹中,而且通常会将这些目录命名为"pics"或者"images"之类的名称。
在W3School在线教程中,我们的工程师把大部分常用的图像都存放到一个名为"i"的文件夹中,"i"是"images"的缩写,这样做的好处是可以最大程度地简化路径。
在HTML中,<img>标签没有结束标签。在XHTML中,<img>标签必须被正确地关闭。
在HTML4.01中,不推荐使用image元素的"align"、"border"、"hspace"以及"vspace"属性。
在XHTML1.0StrictDTD中,不支持image元素的"align"、"border"、"hspace"以及"vspace"属性。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)