简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

零下一度
发布： 2017-07-20 15:12:43
原创
2146 人浏览过

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.cn
上一篇：用base64提升视觉效果的实例教程 下一篇：Bootstrap媒体对象的详解
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Vue项目中未定义模块 我刚刚通过运行npmini tvue@latest创建了一个新的Vue应用程序，如官方文档中指定的那样。然后我尝试按照Vue和Vite网站上的指南将Tailwind添加到我的应用程...
来自于 2023-11-17 12:38:53
0
2
394
Nuxt.js SSG（静态站点生成器）获取API数据 当使用静态站点生成器构建项目时，我理解提前创建的文档是提供给用户的。如果进入页面时有使用axios等获取数据并显示在屏幕上的逻辑，对应的API是被缓存还是不被调用？
来自于 2023-11-16 21:36:07
0
1
176
react中的受控元素怎么理解 react中的受控元素怎么理解？使用state状态控制？react中的受控元素怎么理解？使用state状态控制？
来自于 2023-11-16 14:51:10
0
1
106
解决Django中的django.db.utils.NotSupportedError错误 我在Django中运行项目时遇到错误。问题是不幸的是我升级了我的pip、MySQL客户端和Django版本这是运行pythonmanage.pyrunserver时的错误inche...
来自于 2023-11-14 11:59:20
0
1
246
PHP 修剪 unicode 空格 我正在尝试修剪诸如此字符之类的unicode空格，并且我能够使用此解决方案来做到这一点。此解决方案的问题是它不会修剪普通字符之间的unicode空格。例如这个使用薄空间$strin...
来自于 2023-11-13 08:49:45
0
2
398
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！