首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > html教程

背景颜色设置成透明实例教程

零下一度
零下一度 原创
2017-07-20 15:12:43 1656浏览

1.小三角，通过给一个div设置足够大的边框，让它的上边框，右边框，左边框，的背景颜色设置成透明的，来实现，如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#demo {
				width: 0;
				height: 0;
				/*边框的宽20px*/
				border-width: 20px;
				/*边框样式,实线*/
				border-style: solid;
				/*边框颜色*/
				border-color: transparent transparent red transparent;
			}
		</style>
	</head>

	<body>
		<!--小三角，transparent透明的，-->
	
		<div id="demo">
			
		</div>
	</body>

</html>

　　2.a标签的移动端问题：

　　 1》当再点击a标签的时候，它会有默认的背景颜色，解决办法

　　　　 1 -webkit-tap-highlight-color:transparent;

　　　2》当点击时可能会出现下划线，解决方法

　　　　

1 text-decoration: none; //或者2 3          border: none；//或者4 5          outline:none;

　　　　3>当鼠标放上去时显出下划线，解决办法；

　　

a:hover{
    
text-decoration:none;
}

　　a标签是一个行内标签，如果要设置它的宽高或多个样式可通过display：block;将其变为块级标签。

　　　　

以上就是背景颜色设置成透明实例教程的详细内容，更多请关注php中文网其它相关文章！

解决 移动 适用PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：用base64提升视觉效果的实例教程 下一条：Bootstrap媒体对象的详解

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！