CSS3单色渐变至透明效果

发表日期：2015-09-23 文章编辑：南昌开优网络浏览次数：4284 标签：CSS应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3单色渐变至透明效果</title>
<style>
*{ margin:0; padding:0;}
.kaiu{ width:600px; height:500px; background:url(images/kaiu.jpg) no-repeat; margin:100px auto; position:relative;}
.kaiu .title{ height:50px; line-height:50px; text-align:left; color:#fff; font-size:14px; padding:0 20px; position:absolute; left:30px; top:200px;
  background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
  background-image: -moz-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
  background-image: -o-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
  background-image: linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
}
</style>
</head>

<body>
<!-- 代码部分begin -->
<div class="kaiu">
	<div class="title">南昌网站建设|南昌网站制作|南昌网页设计公司|南昌响应式网站开发|UI设计|网站开发</div>
</div>
<!-- 代码部分end -->
</body>
</html>

返回列表

上一篇：iframe自适应高度下一篇：CSS3数字时钟