Home > Article > Web Front-end > Example analysis of how to set the background of a CSS element to be transparent (image and text)

Example analysis of how to set the background of a CSS element to be transparent (image and text)

黄舟Original: 2017-07-20 09:57:371540browse

To set the background of a certain element to be transparent, it is like this under chrome, firefox, and opera:

background-color: rgba(0, 0, 0, 0.4);

The last parameter 0.4 in rgba is the desired transparency, ranging from 0 to 1 between.

In ie, it usually looks like this:

background-color: rgb(0, 0, 0);
filter: alpha(opacity=40);

opacity represents transparency, its value range is between 0 and 100

So how to make it compatible with various browsers? Just write them together.

Since ie does not support rgba, it will be ignored. Other browsers generally ignore those that they do not support.

Here’s an example:

HTML code:

<body>
	<p class="non-transparent">
		aaaaa
		</p>
	</body>
	
<p class="transparent">
	<p class="box">
		box
		</p>
	</p>

CSS code:

.non-transparent:hover {
	background-color: yellow;
}

.transparent {
	position: absolute;
	top: 0;
	left: 0;
	
	text-align: center;
	
	width: 100%;
	height: 100%;
	
	filter: alpha(opacity=40);
	background-color: rgb(0, 0, 0);
	
	background-color: rgba(0, 0, 0, 0.4);
}

.box {
	background-color: yellow;
	width: 50%;
	height: 50%;
	
	position: relative;
	left: 5%;
	top: 10%;
}

Display effect:

chrome:

firefox:

##opera:

ie8:

In addition, this can also be done in chrome, firefox, and opera:

opacity: 0.4;

But in this case, the transparency of all sub-elements will be set to the same value, and the effect is as follows:

The above is the detailed content of Example analysis of how to set the background of a CSS element to be transparent (image and text). For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to set transparency to background-image?Next article：How to set transparency to background-image?

See more

Example analysis of how to set the background of a CSS element to be transparent (image and text)

Related articles