极客教程CSS 不透明度
CSS不透明度属性
CSS的 opacity 属性用于控制元素的透明度。透明度决定了隐藏元素的内容有多少可见。
您可以在各种元素上使用不透明度属性，无论它们包含文本、图像还是充当背景。
该属性用于创建各种视觉效果，比如淡入/淡出、创建叠加层或减弱背景图像的显眼程度。
语法
本章将介绍CSS透明度属性的使用，可以使用以下值之一：−
- number− 表示为0到1之间的小数。
-
percentage− 表示为0%到100%之间的百分比。
下表显示了不同的透明度值：
| 值 | 描述 |
|---|---|
| 0 | 元素完全透明且不可见。 |
| 0.5 | 元素半透明。 |
| 1 | 元素完全不透明且可见。 |
CSS不透明度 – 值
通过将元素的不透明度属性（opacity）设置为0到1之间的值，我们可以使元素的背景部分透明，同时内部的文本可见。
以下是一个示例 –
<html>
<head>
<style>
div {
background-color: #d3360b;
opacity: 0.4;
padding: 10px;
width: 150px;
height: 110px;
}
</style>
</head>
<body>
<div>
<h3>CSS Opacity to 0.4</h3>
</div>
</body>
</html>
CSS不透明度 – 百分比
你也可以使用 不透明度 属性以 百分比 值，通过将元素的不透明度属性设置为介于0％和100％之间的值，使元素的背景部分透明。
以下是一个例子−
<html>
<head>
<style>
.my-opacity {
background-color: #d3360b;
opacity: 70%;
padding: 10px;
width: 150px;
height: 110px;
}
</style>
</head>
<body>
<div class="my-opacity">
<h3>CSS Opacity to 70%</h3>
</div>
</body>
</html>
CSS 图像的不透明度
下面的示例展示了如何使用 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 透明度的图片悬停效果
下面的示例演示了如何使用 透明度 属性，在光标悬停在图片上时使其透明。
<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="redFlower">
</div>
</body>
</html>
CSS透明度和RGBA色彩值
透明度属性可以使元素及其所有子元素变为透明。为了避免这种情况，您可以使用RGBA色彩值，该值允许您设置颜色的透明度而不影响其子元素。
<html>
<head>
<style>
div {
width: 200px;
padding: 10px;
text-align: center;
}
.my-opacity1 {
background-color: rgba(227, 220, 11);
opacity: 0.1;
}
.my-opacity2 {
background-color: rgba(227, 220, 11);
opacity: 0.3;
}
.my-opacity3 {
background-color: rgba(227, 220, 11);
opacity: 0.6;
}
.my-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="my-opacity1">
CSS Opacity 0.1
</div>
<div class="my-opacity2">
CSS Opacity 0.3
</div>
<div class="my-opacity3">
CSS Opacity 0.6
</div>
<div class="my-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>
下面的示例展示了当用户点击按钮时，元素的不透明度如何更改为指定值。
<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: 250px;
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>