CSS - opacity 属性

上一页
下一页

CSS opacity 属性控制元素的透明度。不透明度决定了隐藏元素的内容中有多少是可见的。

您可以对各种元素使用 opacity 属性，无论它们包含文本、图像还是用作背景。

此属性用于创建各种视觉效果，例如淡入/淡出、创建叠加层或使背景图像不那么突出。

可能的值

  • <alpha-value> − 必须在 0.0 到 1.0 范围内的数字。
  • <percentage> - 特定的百分比值必须在 0% 到 100% 的范围内。

适用于

所有 HTML 元素。

语法


opacity: 0.9;
opacity: 90%;

下表显示了不同的不透明度值：

值 描述
0 该元素是完全透明的，不可见。
0.5 元素是半透明的。
1 该元素是完全不透明且可见的。

CSS opacity- <alpha-value> 值

我们可以通过将元素的不透明度属性设置为介于 0 和 1 之间的值，使元素的背景部分透明，但保持其中的文本可见。

这是一个例子 -


<html>
<head>
<style>
	 	.decimal-opacity {
	 	 	 background-color: #d3360b;
	 	 	 opacity: 0.4;
	 	 	 padding: 10px;
	 	 	 width: 150px;
	 	 	 height: 110px;
	 	}
</style>
</head>
<body>
	 	<div class="decimal-opacity">
	 	 	 <h3>CSS Opacity to 0.4</h3>
	 	</div>
</body>
</html>

CSS opacity - 百分比值

您还可以使用具有百分比值的 opacity 属性，通过将元素的 opacity 属性设置为介于 0% 和 100% 之间的值，使元素的背景部分透明。

这是一个例子 -


<html>
<head>
<style>
	 	.percentage-opacity {
	 	 	 background-color: #d3360b;
	 	 	 opacity: 70%;
	 	 	 padding: 10px;
	 	 	 width: 150px;
	 	 	 height: 110px;
	 	}
</style>
</head>
<body>
	 	<div class="percentage-opacity">
	 	 	 <h3>CSS Opacity to 70%</h3>
	 	</div>
</body>
</html>

CSS opacity - 带图像

下面是一个示例，演示如何使用 opacity 属性创建部分透明的图像 -


<html>
<head>
<style>
	 	div {
	 	 	 display: flex
	 	}
	 	.first-img {
	 	 	 opacity: 0.1;
	 	 	 margin: 10px;
	 	 	 width: 170px;
	 	 	 height: 130px;
	 	}
	 	.second-img {
	 	 	 opacity: 0.5;
	 	 	 margin: 10px;
	 	 	 width: 170px;
	 	 	 height: 130px;
	 	}
	 	.third-img {
	 	 	 opacity: 1;
	 	 	 margin: 10px;
	 	 	 width: 170px;
	 	 	 height: 130px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <img class="first-img" src="images/tutimg.png" alt="Tutorialspoint">
	 	 	 <img class="second-img" src="images/tutimg.png" alt="Tutorialspoint">
	 	 	 <img class="third-img" src="images/tutimg.png" alt="Tutorialspoint">
	 	</div>
</body>
</html>

CSS opacity - 图像悬停效果

以下示例演示了如何使用 opacity 属性在光标悬停在其上时制作透明图像：


<html>
<head>
<style>
	 	div {
	 	 	 display: flex
	 	}
	 	.opacity-image {
	 	 	 opacity: 1;
	 	 	 margin: 10px;
	 	 	 width: 170px;
	 	 	 height: 130px;
	 	}
	 	.opacity-image:hover {
	 	 	 opacity: 0.3;
	 	}
</style>
</head>
<body>
	 	<h3>Hover Over an image</h3>
	 	<div>
	 	 	 <img class="opacity-image" src="images/tutimg.png" alt="Tutorialspoint">
	 	</div>
</body>
</html>

CSS opacity - 使用 RGBA 颜色值

opacity 属性将使元素及其所有子元素透明。为防止出现这种情况，您可以使用 RGBA 颜色值，它允许您设置颜色的不透明度，而不会影响其子元素。

这是一个例子 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 200px;
	 	 	 padding: 10px;
	 	 	 text-align: center;
	 	}
	 	.decimal-opacity1 {
	 	 	 background-color: rgba(227, 220, 11);
	 	 	 opacity: 0.1;
	 	}
	 	.decimal-opacity2 {
	 	 	 background-color: rgba(227, 220, 11);
	 	 	 opacity: 0.3;
	 	}
	 	.decimal-opacity3 {
	 	 	 background-color: rgba(227, 220, 11);
	 	 	 opacity: 0.6;
	 	}
	 	.decimal-opacity4 {
	 	 	 background-color: rgba(227, 220, 11);
	 	 	 opacity: 0.9;
	 	}
	 	.rgba-opacity1 {
	 	 	 background-color: rgba(227, 220, 11, 0.1);
	 	}
	 	.rgba-opacity2 {
	 	 	 background-color: rgba(227, 220, 11, 0.3);
	 	}
	 	.rgba-opacity3 {
	 	 	 background-color: rgba(227, 220, 11, 0.6);
	 	}
	 	.rgba-opacity4 {
	 	 	 background-color: rgba(227, 220, 11, 0.9);
	 	}
	 	.transparent-container {
	 	 	 	 	margin-left: 50px;
	 	 	 	 	float: left;
	 	}
	 	.regba-container {
	 	 	 	 	margin-left: 50px;
	 	 	 	 	float: left;
	 	}
</style>
</head>
<body>
	 	<div class="transparent-container">
	 	 	 <h4>Tranparent element</h4>
	 	 	 <div class="decimal-opacity1">
	 	 	 	 	CSS Opacity 0.1
	 	 	 </div>
	 	 	 <div class="decimal-opacity2">
	 	 	 	 	CSS Opacity 0.3
	 	 	 </div>
	 	 	 <div class="decimal-opacity3">
	 	 	 	 	CSS Opacity 0.6
	 	 	 </div>
	 	 	 <div class="decimal-opacity4">
	 	 	 	 	CSS Opacity 0.9
	 	 	 </div>
	 	</div>
	 	<div 	class="regba-container">
	 	 	 <h4>With RGBA color values</h4>
	 	 	 <div class="rgba-opacity1">
	 	 	 	 	CSS Opacity 10%
	 	 	 </div>
	 	 	 <div class="rgba-opacity2">
	 	 	 	 	 	 	 	CSS Opacity 30%
	 	 	 </div>
	 	 	 <div class="rgba-opacity3">
	 	 	 	 	 	 	 	CSS Opacity 60%
	 	 	 </div>
	 	 	 <div class="rgba-opacity4">
	 	 	 	 	CSS Opacity 90%
	 	 	 </div>
	 	</div>
</body>
</html>

CSS opacity - 通过动作进行更改

下面是一个示例，说明当用户单击按钮时如何更改元素的不透明度 -


<html>
<head>
<style>
	 	.opacity-container {
	 	 	 display: flex;
	 	 	 justify-content: space-between;
	 	 	 margin-top: 10px;
	 	}
	 	.opacity-button {
	 	 	 background-color: #0cc42b;
	 	 	 border: none;
	 	 	 padding: 10px;
	 	 	 border-radius: 5px;
	 	 	 cursor: pointer;
	 	 	 width: 90px;
	 	 	 height : 40px;
	 	}
	 	#heading {
	 	 	 background-color: #d7e20c;
	 	 	 width: 150px;
	 	 	 height: 60px;
	 	 	 padding: 5px;
	 	 	 transition: opacity 0.3s ease;	
	 	 	 text-align: center;
	 	 	 margin-left: 35%;
	 	}
</style>
</head>
<body>	
	 	<p>Click the buttons to see how the opacity changes.</p>	
	 	<div class="opacity-container">
	 	 	 <button class="opacity-button" onclick="changeOpacity(0)">0 opacity</button>
	 	 	 <button class="opacity-button" onclick="changeOpacity(0.3)">0.3 opacity</button>
	 	 	 <button class="opacity-button" onclick="changeOpacity(0.6)">0.6 opacity</button>
	 	 	 <button class="opacity-button" onclick="changeOpacity(0.9)">0.9 opacity</button>
	 	 	 <button class="opacity-button" onclick="changeOpacity(1)">1.0 opacity</button>
	 	</div>
	 	 	 <h3 id="heading">Tutorialspoint CSS Opacity</h3>
	 	<script>
	 	 	 function changeOpacity(opacityValue) {
	 	 	 	 	var selectElement = document.getElementById("heading");
	 	 	 	 	selectElement.style.opacity = opacityValue;
	 	 	 }
	 	</script>
</body>
</html>
打印本页
上一页
下一页