关闭

css3中的content字图片处理background

1872人阅读 评论(0) 收藏 举报
分类:

<!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>


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

图片和文字保持相对位置不变以及background属性

这个代码大神分分钟写完。先来看效果图: 下面是代码: aa *{padding:0;margin:0;} ul,li{list-style:none;} .wrap { wid...
  • DHASA
  • DHASA
  • 2016-03-02 19:43
  • 1248

关于before和after以及content的用法

一、伪元素和伪类的区别 在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,即 :before为伪元素 ; ::before为伪类; 关于语法和浏览器支持 伪元素实际上在CSS1中就存在了...
  • qq_30486009
  • qq_30486009
  • 2016-05-30 10:34
  • 3426

html特殊字符 编码css3 content:"我是特殊符号"

项目中用到的一些特殊字符和图标 html代码 div class="cross">div> css代码 .cross{ width: 20px; heigh...
  • u013261261
  • u013261261
  • 2015-03-23 13:18
  • 7221

css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡(动画系列3)

css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡
  • kongbingyan
  • kongbingyan
  • 2016-04-05 15:01
  • 2249

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

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

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

background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage。 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。那么...
  • u013510614
  • u013510614
  • 2014-10-30 20:44
  • 1116

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

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

CSS3background-size背景图片尺寸属性

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

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

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

CSS3-background的基本用法

*{margin:0px;padding: 0px;} .box-top{width: 50%;height: 400px;background-color: #ccc;margin: 1% ...
  • Marvel__Dead
  • Marvel__Dead
  • 2016-12-24 10:25
  • 928
    个人资料
    • 访问:2967311次
    • 积分:28836
    • 等级:
    • 排名:第210名
    • 原创:122篇
    • 转载:1964篇
    • 译文:0篇
    • 评论:261条
    最新评论