通过纯CSS实现文字前添加图片

纯CSS添加图片

<ul id = "nav"><li><a href="#">Home</a></li><li>Servies</li><ul><li>Design</li><li>Development</li></ul><li>Contact us</li></ul>

使用padding + background方法

 #nav > li{padding-left: 30px;height:20px;background:url(folder.png) no-repeat;background-size: 30px 20px;background-position: left top;}

使用伪元素::before

 #nav > li::before{content: "";width: 20px;height: 20px;float: left;/* margin: 0 2px 0 0; */background:url(folder.png) no-repeat;background-size: 20px 20px;}

其实不只是图片，伪元素::before ::after可以通过content以文本形式插入。插入内容后，给伪元素添加样式后就和其他元素添加一样，比如边框，背景等。

通过纯CSS实现文字前添加图片相关推荐

ECharts Title文字前添加图片
项目需要被逼无奈开始了对ECharts研究和使用问题:在ECharts Title前添加图片废话不多说,直接上代码 : title: {text: ' {a| 动态数据}',show: true, ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
css实现文字左右添加横线
css实现文字左右添加横线方法一.div标签实现 HTML: <div class="thirdLine"><span class="line&quo ...
纯css控制文字显示隐藏
纯css控制文字显示隐藏用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
纯css在div上添加小三角
纯css在div上添加小三角有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
html怎么把字做成动画效果,用纯CSS实现文字的动态效果
你可能经常会看到类似酷炫的网站: APPLE官网图片作者的工程项目在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. ...
纯CSS实现非常好看的图片轮播演示
简介: 这是一款使用纯 CSS 实现的非常好看的图片轮播/幻灯片,切换方式为淡入淡出网盘下载地址: http://kekewangLuo.cc/5ZtqYb6bqd60 图片:
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
PHP 根据文字内容添加图片上实现自动换行的小程序
前进的动力来自很多东西,渴望也好,向往也好,压力也好. 总之是源于人对更好的事物的追求. 想要变成大牛,就永远不要失去这种渴望,这种追求. 最近这一周一直在鼓捣一个将用户输入的文字加载到图片上面的功能 ...

通过纯CSS实现文字前添加图片

纯CSS添加图片

通过纯CSS实现文字前添加图片相关推荐

最新文章

热门文章