简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Example tutorial on setting the background color to transparent

零下一度
Release： 2017-07-20 15:12:43
Original
2145 people have browsed it

1. The small triangle is achieved by setting a large enough border for a div and setting its top border, right border, left border, and background color to transparent, as follows: 

<!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>
Copy after login

2. Problems with the mobile version of the a tag:

1》When you click the a tag, it will have a default background color. Solution

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

　2》Underline may appear when clicked, solution

　　

1 text-decoration: none; //或者2 3          border: none；//或者4 5          outline:none;
Copy after login
　3>Underline appears when the mouse is placed on it, solution;

　

a:hover{
    
text-decoration:none;
}
Copy after login
　The a tag is an inline tag, if you want Set its width, height or multiple styles through display: block; to turn it into a block-level label.

　　

The above is the detailed content of Example tutorial on setting the background color to transparent. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
move solve Be applicable
source：php.cn
Previous article：Example tutorial on using base64 to improve visual effects Next article：Detailed explanation of Bootstrap media objects
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Module is not defined in Vue project I just created a new Vue application by running npmini tvue@latest as specified in the off...
From 2023-11-17 12:38:53
0
2
394
Nuxt.js SSG (Static Site Generator) Get API Data When building a project using a static site generator, I understand that documentation cre...
From 2023-11-16 21:36:07
0
1
176
How to understand controlled elements in react How to understand controlled elements in react? Use state control? How to understand contr...
From 2023-11-16 14:51:10
0
1
106
Resolving django.db.utils.NotSupportedError error in Django I'm getting an error when running a project in Django. The problem is unfortunately I upgr...
From 2023-11-14 11:59:20
0
1
246
PHP trim unicode spaces I'm trying to trim unicode spaces such as this character and I was able to do it using thi...
From 2023-11-13 08:49:45
0
2
398
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！