[CSS]CSS应用:图像透明与不透明
[CSS]CSS应用:图像透明与不透明
[CSS]CSS应用:图像透明与不透明
CSS样式:
- img
- {
- opacity:0.4;
- filter:alpha(opacity=40); /* IE8 及其更早版本 */
- }
- img:hover
- {
- opacity:1.0;
- filter:alpha(opacity=100); /* IE8 及其更早版本 */
- }
第一个CSS块是和例1中的代码类似。此外,我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图片是清晰的。
此CSS是:opacity=1.
IE8和更早版本使用: filter:alpha(opacity=100).
当鼠标指针远离图像时,图像将重新具有透明度。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <style>
- div.background
- {
- width:500px;
- height:250px;
- background:url(https://www.runoob.com/images/klematis.jpg) repeat;
- border:2px solid black;
- }
- div.transbox
- {
- width:400px;
- height:180px;
- margin:30px 50px;
- background-color:#ffffff;
- border:1px solid black;
- opacity:0.6;
- filter:alpha(opacity=60); /* IE8 及更早版本 */
- }
- div.transbox p
- {
- margin:30px 40px;
- font-weight:bold;
- color:#000000;
- }
- </style>
- </head>
- <body>
- <div class="background">
- <div class="transbox">
- <p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
- </p>
- </div>
- </div>
- </body>
- </html>
热门文章推荐
- 免费视频云存储
- 酷播云视频二维码生成器
- 免费无广告的视频云服务
- 免费视频二维码的使用指南(一看就会懂的二维码教程)
- 免费第三方网站上传视频平台
- 酷播云怎么生成二维码
- 多个视频怎么生成一个二维码?
- 企业视频上传,不要有广告,用什么好
请稍候...