css3改变文字背景颜色

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3改变文字背景颜色的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3改变文字背景颜色</title>

<style>

/* demo stylesheet */

body {
	background: #252525;
}

#container {
	width: 800px;
	margin: 50px auto;
	font: 14px/16px Helvetica,Arial,sans-serif;
	color: #000;	
	background:#fff;
	padding: 30px;
overflow:hidden;
}


p {
	padding:0;
	margin: 0 0 10px 0;
}

p.orange {
	padding:0;
	margin: 0 0 10px 0;
}

p.blue {
	padding:0;
	margin: 0 0 10px 0;
}

h2 {
	padding:0;
	margin: 0 0 10px 0;
	font: 20px Helvetica,Arial,sans-serif;
	color: #000;
}

/* end demo stylesheet */



/* selection */

::selection {
	background:#d3d3d3; 
	color:#555;
}

::-moz-selection {
	background:#d3d3d3; 
	color:#555;
}

::-webkit-selection {
	background:#d3d3d3; 
	color:#555;
}

/* end selection */




/* classed selection */

p.orange::selection {
	background:#c2660d; 
	color:#fff;
}

p.orange::-moz-selection {
	background:#c2660d; 
	color:#fff;
}

p.orange::-webkit-selection {
	background:#c2660d; 
	color:#fff;
}


p.blue::selection {
	background:#2d7e99; 
	color:#fff;
}

p.blue::-moz-selection {
	background:#2d7e99; 
	color:#fff;
}

p.blue::-webkit-selection {
	background:#2d7e99; 
	color:#fff;
}

/* end classed selection */

</style>

</head>



<body>
<div id="container">


<h2>Basic Selection</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.
</p>

<h2>Orange Selection</h2>
<p class="orange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet eu.
</p>

<h2>Blue Selection</h2>
<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan lectus et ante sagittis ut tristique est congue. Morbi eget ante leo, ut convallis sapien. Nulla facilisi. Curabitur congue placerat ante ac pretium. Nullam porttitor dui ut quam rhoncus cursus. Proin scelerisque lectus in neque gravida laoreet. Sed dapibus eleifend metus nec interdum. Morbi ultrices diam et ligula consequat ut auctor mi consectetur. Proin elementum ultrices facilisis. Fusce interdum nunc quis tortor bibendum convallis. Curabitur vehicula adipiscing est, sed interdum ante aliquet
</p>

</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)