【CSS 12】image transparency 不透明度 opacity属性 :hover选择器构造透明悬停效果透明盒透明度继承 RGBA

最新推荐文章于 2024-07-16 17:18:30 发布

Zanebla

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量698

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/131420286

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

- - image transparency 不透明度

image transparency 不透明度

opacity 属性指定元素的不透明度/透明度

简单透明图像

opacity 不透明度属性的取值范围为 0.0-1.0
值越低，越透明

img {
	opacity: 0.5;
}

透明悬停效果
opacity 属性通常与 :hover （伪类）选择器一同使用，这样就可以在鼠标悬停时更改不透明度

img {
	opacity: 0.5;
}

img:hover {
	opacity: 1.0;
}

--------------------
/*反向悬停效果*/
img:hover {
	opacity: 0.5;
}

透明盒
使用 opacity 属性为元素的背景添加透明度时，其所有后代元素都继承相同的透明度
这可能会使完全透明的元素内的文本难以阅读

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-color: #4CAF50;
	padding: 10px;
}

div.first {
	opacity: 0.1;
}

div.second {
	opacity: 0.3;
}

div.third {
	opacity: 0.6;
}
</style>
</head>
<body>

<h1>透明框</h1>
<p>当使用 opacity 属性为元素背景添加透明度时，其所有后代素也将变为透明<br>
这可能会使完全透明的元素内的文本难以阅读</p>

<div class="first"><section><p>opacity 0.1</p></section></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

使用RGBA透明度
如果不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值
下面的例子设置背景色而不是文本的不透明度

RGBA 颜色值指定为：rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

div {
	background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */

透明盒文本

<!DOCTYPE html>
<html>
<head>
<style>
<!--
首先，我们创建一个带有背景图像和边框的 <div> 元素（class="background"）
然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）
<div class="transbox"> 有背景色和边框 - 这个 div 是透明的
在透明的 <div> 内，我们在 <p> 元素内添加了一些文本
-->
div.background {
	background: url(/i/photo/tulip_peach_blossom_s.jpg) repeat;
	border: 2px solid black;
}

div.transbox {
	margin: 30px;
	background-color: #ffffff;
	border: 1px solid black;
	opacity: 0.6;
}

div.transbox p {
	margin: 5%;
	font-weight: bold;
	color: #000000;
}
</style>
</head>
<body>

<div class="background">
	<div class="transbox">
		<p>此文本放置在一个透明框中</p>
	</div>
<div>
</body>
</html>

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS 12】image transparency 不透明度 opacity属性 :hover选择器构造透明悬停效果透明盒透明度继承 RGBA

【CSS 12】image transparency 不透明度 opacity属性创建一个带有背景图像和边框的元素（class="background"）然后，我们在第一个中创建另一个（class="transbox"）使用 opacity 属性为元素的背景添加透明度时，其所有后代元素都继承相同的透明度。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。如果不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值
复制链接

扫一扫