css3中的content字图片处理background

原创 2016年08月31日 14:44:37

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;height: 30px;
background: #ccc;position: relative;
}
#div1:after{position: absolute;right: -40px;font-size: 20px;
background: red;
content: '\2748';
}
#div2{position: relative;width: 100px;height: 20px;
background: pink;}
#div2:before{content: "";width: 20px;height: 20px;
background: url(eye_close.png)no-repeat;
display: block;
background-size: 100%;
position: absolute;left: 50px;
}
#div2:after{display: inline-block;
width: 20px;height: 20px;
position: absolute;
background: red;right: -20px;
content: url(eye_close.png);
background-size:80px ;    
}
</style>
</head>
<body>
<div id="div1">1111</div>
<div id="div2">2222</div>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3的content属性详解

CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。 ...

CSS3.0中content格式的图标不显示

从网上下载了后台源码  右键另存为本地后 发现所有content表示的图标 均显示不出来  问了很多朋友 都说是路径的问题  再查看所有文件路径后 检查无误 还是显示不出来 然后下班就没有去理他了...
  • Viyoo08
  • Viyoo08
  • 2015年08月25日 13:18
  • 462

常用的HTML特殊字符大全(css3 content)

之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移动端的页面,兼容性很好,content用法不仅仅简单,而且很利于页面打开!今天就说是css...

常用的HTML特殊字符大全(css3 content)

之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移动端的页面,兼容性很好,content用法不仅仅简单,而且很利于页面打开!今天就说是css...

利用jquery写无缝循环滑动的轮播图

1.效果gif图: 2.主要实现思想: a.第一层div,设置overflow为hidden b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以。 c.li设置...
  • Szu_AKer
  • Szu_AKer
  • 2016年04月22日 23:14
  • 22526

css3实现一个div设置多张背景图片及background-image属性

引子 以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了...
  • twoto3_
  • twoto3_
  • 2016年09月20日 14:12
  • 1343

CSS3background-size背景图片尺寸属性

出处:http://sentsin.com/web/939.html background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage。 并且会...

css3实现一个div设置多张背景图片及background-image属性

css3实现一个div设置多张背景图片及background-image属性 2014年9月16日 52122次浏览 引子 以前做网页布局的时候,一个div只能设置一张背景图片,...
  • amy0821
  • amy0821
  • 2016年08月23日 17:26
  • 878

css3实现一个div设置多张背景图片及background-image属性

以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了一个div只...
  • cwzhsi
  • cwzhsi
  • 2015年03月26日 20:40
  • 1061

CSS3:background-size背景图片尺寸属性

background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage。 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。那么...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3中的content字图片处理background
举报原因:
原因补充:

(最多只允许输入30个字)