颜色透明例子

 

#include <windows.h>  // Header File For Windows
#include <stdio.h>   // Header File For Standard Input/Output
#include <gl\gl.h>   // Header File For The OpenGL32 Library
#include <gl\glu.h>   // Header File For The GLu32 Library
#include <gl\glaux.h>
#include <GL/glut.h>

#pragma comment(lib,"opengl32.lib")
#pragma comment(lib,"glu32.lib")
#pragma comment(lib,"glaux.lib")
void CreatWindow (void)
{
 auxInitDisplayMode (AUX_RGB);
 auxInitPosition (0,0,400,400);
 auxInitWindow ("半透明");
}
 
void myinit(void)
{   
 glEnable(GL_BLEND);   
 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);   
 glShadeModel(GL_FLAT);   
 glClearColor(1.0, 1.0, 1.0, 0.0);
}
void CALLBACK display(void)
{   
 glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);    
 glColor4f(1.0, 0.0, 0.0, 0.3);
 glTranslatef(-0.4,-0.4,0.0);
 glRectf(0.0, 0.0,1.0, 1.0);    
 glColor4f(0.0, 1.0, 0.0, 0);
 glTranslatef(0.4,0.4,0.0);
 glRectf(0.0, 0.0, 1.0, 1.0);
 glColor4f(0.0, 0.0, 1.0, 0.3);
 glTranslatef(0.30,0.30,0.0);
 glRectf(0.0, 0.0, 1.0, 1.0);
 glFlush();
}
void CALLBACK myReshape(GLsizei w, GLsizei h)
{   
 glViewport(0, 0, w, h);   
 glMatrixMode(GL_PROJECTION);   
 glLoadIdentity();   
 if (w <= h)        
  glOrtho (-4,4,4,-4,8,-8);   
 else        
  glOrtho (4,-4,-4,4,-8,8);   
}
void main()
{
 CreatWindow();
  myinit();
    auxReshapeFunc(myReshape);
 auxMainLoop(display);
}

### 设置背景颜色透明的方法 在 CSS 中,可以通过多种方法实现背景颜色透明效果。以下是几种常见的做法: #### 方法一:使用 `transparent` 值 可以直接将元素的背景色设置为完全透明,具体语法如下: ```css element { background-color: transparent; } ``` 这种方法适用于不需要渐变或其他复杂效果的情况[^1]。 #### 方法二:使用 `rgba()` 函数 如果希望控制背景颜色的具体透明度,可以采用 `rgba(R, G, B, A)` 的形式来定义颜色。其中 R、G 和 B 表示红绿蓝三个通道的颜色值(取值范围为 0 到 255),A 是 alpha 通道,表示透明度(取值范围为 0 到 1)。如: ```css .box01 { width: 200px; height: 200px; background-color: rgba(165, 42, 42, 0.3); } ``` 上述代码中的 `.box01` 类设置了带有透明度的深红色背景[^3]。 #### 方法三:结合 `opacity` 属性 虽然 `opacity` 可以让整个元素变得透明,但它会影响子元素的可见性。因此,除非特别需求,一般推荐优先考虑前两种方法。下面是一个例子: ```css .element { opacity: 0.5; /* 整体透明度 */ } ``` #### 方法四:CSS3 多重背景与渐变支持 对于更复杂的场景,比如需要叠加多个图层或者应用线性/径向渐变时,可借助 CSS3 提供的功能完成背景设计。如: ```css .background-example { background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.8)); } ``` 此段代码创建了一个从半透明红色到较不透明蓝色的过渡效果[^2]。 综上所述,最简单直接的方式还是运用 `background-color: transparent;` 或者基于现代浏览器广泛兼容性的 `rgba()` 来达成目标。 ### 示代码 以下是一份完整的 HTML + CSS 实现方案: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Background Transparent Example</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; justify-content: space-around; align-items: center; min-height: 100vh; background: url('https://via.placeholder.com/800') no-repeat center / cover; } .box-transparent { width: 200px; height: 200px; background-color: transparent; border: 2px solid white; text-align: center; line-height: 200px; color: white; } .box-rgba { width: 200px; height: 200px; background-color: rgba(75, 0, 130, 0.6); /* Indigo with transparency */ color: white; text-align: center; line-height: 200px; } </style> </head> <body> <div class="container"> <div class="box-transparent">Transparent BG</div> <div class="box-rgba">RGBA BG</div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值