8、CSS3 样式：为网页元素增添丰富效果

最新推荐文章于 2025-12-01 15:34:53 发布

s1t2u3

最新推荐文章于 2025-12-01 15:34:53 发布

阅读量36

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5视频权威指南：从入门到精通文章标签： CSS3 透明度渐变

本文链接：https://blog.youkuaiyun.com/s1t2u3/article/details/150844997

HTML5视频权威指南：从入门到精通专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

CSS3 样式：为网页元素增添丰富效果

1. CSS3 样式概述

在网页设计中，为了让页面更加美观和吸引人，常常需要运用各种样式来对元素进行修饰。CSS3 引入了许多强大的功能，能够帮助我们实现各种复杂的效果，如透明度、渐变、跑马灯效果、过渡和变换等。这些功能不仅可以提升页面的视觉效果，还能增强用户体验。

2. 透明度（Opacity）

透明度属性 opacity 可以让元素呈现出不同程度的透明效果。它的值范围在 0.0 到 1.0 之间，其中 0.0 表示元素完全透明，1.0 表示元素完全不透明。

2.1 示例代码

以下是一个使用透明度的示例，将视频以 70% 的透明度放置在图片上方：

<style type="text/css">
    video {
        width: 25%;
        position: absolute;
        top: 100px;
        left: 30px;
        opacity: 0.70;
    }
</style>
<img src="Sunrise.jpg"></img>
<video autoplay>
    <source src="HelloWorld.mp4" type="video/mp4">
    <source src="HelloWorld.webm" type="video/webm">
    <source src="HelloWorld.ogv"