css插入图片方法如下:
操作设备:戴尔笔记本电脑
操作系统:win10
操作程序:html编辑器v8.21
1、打开html编辑器并创建一个新的html文件。
2、新建完一个新的html文件后,在index.html的<style>标签中,输入如下所示的CSS代码。
3、输入完CSS代码之后,接下来运行index.html页面,可以发现,本地图片通过背景图片衜中的本地路径成功调用为了背景图片,图片就成功加入了。
轮播图是互联网最常见到的一个元素,不论是PC端还是移动端,或者是APP,我们都会经常遇到,对于前端工程师来说,轮播图的实现都是前端开发中的基本操作,实现起来并没有那么困难。
前端工程师实现轮播图有好多种方式,有的喜欢使用自己编写的脚本,有的喜欢使用JQurey,有的喜欢使用swiper插件,不过很少有人会单纯的使用CSS来实现轮播图。
使用CSS实现轮播图操作主要使用了伪类:checked,并将lable指向对应的input的id,来实现这个轮播的功能。
首先我们要有一个容器用来防止轮播图,这里使用的p来代替,HTML页面的代码如下:
轮播图CSS样式,这里用的ul-p,需要的话可以再写代码时用图片表示,这里仅仅是简要的表示一下:
label标签用来放置按钮,通过label来控制轮播图的切换,关于其具体的样式在实际开发中进行调整即可。
最后就是实现css轮播图的核心,主要通过使用控制控制margin值来实现轮播的而效果。
CSS是层叠样式表。下面,我们来看看怎么使用CSS让图片水平垂直都居中吧。
新建一张文档在桌面新建一张文本文档,改名为1.txt,如下图所示:
基础代码然后打开文本文档,编写基础代码,再把桌面上的老虎图片引入进去,如下图所示:
后缀名然后把文本文档后缀名改为.html,如下图所示:
运行网页然后在浏览器中运行网页,现在图片有了,只是还没有居中,图片居住代码要用CSS写,如下图所示:
CSS代码然后写上CSS代码,如下图所示:
垂直水平居中可以看到图片已经垂直和水平居中,如下图所示:
总代码<!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
.picTiger{
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Users/Administrator/Desktop/1.jpg">
</body>
<html>