CSS透明度

【CSS透明度】css如何设置透明度？设置透明度的方法

2022-01-17 18:18发布

站内问答 / CSS3
2239 5 5
发送
5条回答
靓猴一枚
2楼 · 2022-01-20 09:27

新建一个html文件，命名为test.html，用于讲解css中如何设置透明度。

image.png

在test.html文件中，使用div标签创建两个模块，下面将使用css对两个div进行样式设置image.png

在test.html文件中，分别设置两个div的class属性，分别为demo1、demo2。下面将在样式表中通过两个class来设置样式。

image.png

在css标签中，对页面的div的样式进行统一设置，定义其宽度、高度都为120px，浮动向左对齐。

image.png

在css标签中，对class为demo1的div进行样式设置，使用background属性将其背景颜色设置为红色。

image.png


在css标签中，对class为demo2的div进行样式设置，使用background属性将其背景颜色设置为红色，并在rgba色值的后面加上0.5的透明度。

image.png

在浏览器打开test.html文件，查看实现的效果

image.png


回答: 2022-01-20 09:30

1

上来打杂的
3楼 · 2022-01-21 15:18

一、css rgba()设置颜色透明度

语法：

1rgba（R,G,B,A）;


RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。


rgba（)里的值的介绍：


R：红色值。正整数 （0~255）


G：绿色值。正整数 （0~255）


B：蓝色值。正整数（0~255）


A：透明度。取值0~1之间


rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

二、css opacity属性设置背景透明度

语法：

1opacity: value ;

value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。

opacity属性具有继承性，会使容器中的所有元素都具有透明度；

rgba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。至于在什么场景下使用那种方法就要看实际需要了。



苏楠 - 世界的没好好与你环环相扣
4楼 · 2022-01-24 16:32

1.

新建一个html文件,命名为test.html,用于讲解css中如何设置透明度。

2.

在test.html文件中,使用div标签创建两个模块,下面将使用css对两个div进行样式设置。

3.

在test.html文件中,分别设置两个div的class属性,分别为demo1、demo2。下面将在样式表中通过两个class来设置样式。

4.

在css标签中,对页面的div的样式进行统一设置,定义其宽度、高度都为120px,浮动向左对齐。


Danke - 四有青年
5楼 · 2022-01-25 15:34

　　opacity:value|inherit;

 

　　value：用来设置不透明度。从0.0（完全透明）到1.0（完全不透明）

 

　　inherit：应该从父元素继承opacity属性的值

 

　　例：

 

　　将图片设置为不透明

 

　　

 

　　未设置透明度：

 

　　

 

　　设置了透明度：

 

　　

 

　　

 

　　效果图如下：

 

　　注意：

 

　　在IE9,Firefox,Chrome,Opera浏览器中使用属性opacity来设定透明度。opacity属性能够设置的值从0.0到1.0。值越小，越透明。

 

　　IE8以及更早的版本使用滤镜filter:alpha(opacity=x)，x能够取的值从0到100。值越小，越透明。

 

　　案例分享

 

　　使用opacity属性制作一个若隐若现的向下的箭头

 

　　在这个案例中需要使用到CSS3中的animation动画属性，通过设置动画属性的值来规定动画执行的时间以及在动画过程中的透明度变化的设计

 

　　

 

　　style

 

　　.box

 

　　{-webkit-animation:box5sinfinite;

 

　　-webkit-animation-fill-mode:both;

 

　　}

 

　　@-webkit-keyframesbox

 

　　{

 

　　from

 

　　{

 

　　opacity:0;

 

　　}

 

　　to

 

　　{

 

　　opacity:1;

 

　　}

 

　　}

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　


相关问题推荐

  • css如何利用transparent属性设置透明度CSS透明度 2022-04-01 18:58
    回答 4

    如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent transparent在 不同 css版

  • 如何设置CSS样式中的透明度CSS透明度 2022-04-01 18:58
    回答 4

    怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。.box{width:300px;height:200px;margin:0auto;boxder:1pxsolid#ccc;background:#000;filter:alpha(opacity:30);opacity:0.3;-moz-opacity:0.3;-khtml-o...

  • java 怎么判断png图片是否是有透明度的CSS透明度 2022-02-25 15:20
    回答 6

    解决方案You can check if the image's color model includes an alpha channel:BufferedImage img = ImageIO.read(/* from somewhere */);if (img.getColorModel().hasAlpha()) {undefined// img has alpha channel...

  • eclipse背景图片透明度怎么修改CSS透明度 2022-02-25 15:19
    回答 5

    找到 eclipse 的安装目录 进入到 plugins 文件夹下，这个文件是管理 eclipse样式相关的文件夹然后我们进入它的子目录 org.eclipse.ui.themes_1.2.1.v20170809-1435 文件夹，去里面找 与 eclipse 相关的样式设置，继续寻找来到 这个界面。 考到css 文件夹，与...

  • CSS或JavaScript怎样实现图片透明度渐变CSS透明度 2022-02-16 11:23
    回答 6

    css问题filter: alpha(opacity=100,finishopacity=0,style=2)alpha是来设置透明度的,它的基本属性是filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.opacity代表透明度数,选值0-100,0是完全透明,100是不透明.finishopacit...

  • 怎么用css调背景图片的颜色深浅而不会影响文字的效CSS透明度 2022-02-16 11:23
    回答 4

    设置背景颜色：要设置背景颜色，直接使用background:颜色值;即可。如：body{background:#000}将body的背景颜色设置为黑色。 设置背景图片：1.规律背景图片。不如我们要设置一个渐变的背景图片，这种背景只需要切出1像素宽，高度合适的图片作为背景即可。body...

  • CSS父级设置了透明，其中一个子元素不透明是什么原CSS透明度 2022-02-16 11:22
    回答 2

    原因分析： 使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看。 可以使用一张透明的图片做背景可以达成效果...

  • css 滚动条怎么不占内容位置，且悬浮宽度变大CSS透明度 2022-02-09 18:54
    回答 3

    用css 隐藏掉overflow在用div 模拟重画滚动条，用div和z-index配合模拟滚动条

  • css中的div如何实现从左到右逐渐透明，需要哪个CSS透明度 2022-02-09 18:54
    回答 4

    第一步，双击打开HBuilder编辑工具，新建静态页面leftright.html，第二步，在插入一个div标签，设置id属性值为leftright，第三步，设置div的样式属性，使用linear-gradient属性进行设置第四步，保存代码，预览该静态页面，查看页面效果，第五步，将linear-gra...

  • css 重叠部分透明 如何实现CSS透明度 2022-02-08 18:48
    回答 3

    .box{   width:300px;   height:200px;   margin:0 auto;   boxder:1px solid #ccc;   background:#000;   filter:alpha(opacity:30);   opacity:0.3;   color:red;}

  • CSS如何给图像设置透明度CSS透明度 2022-02-08 18:48
    回答 5

    下面给出一个具体的实例。把类为 box 的层设为透明。.box{   width:300px;   height:200px;   margin:0 auto;   boxder:1px solid #ccc;   background:#000;   filter:alpha(opacity:30);   opacity:0.3;   color:red;}...

  • CSS透明度变化的动画 （淡入淡出效果）怎么实现CSS透明度 2022-01-17 18:19
    回答 4

    要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属性是CSS3中的新增属性，因此有必要在一些可支持的浏览器上运行时加上前缀。像是Chrom，Safari编写为-webkit-transition，为FireFox编写-moz-transition，为Internet Explorer编写-...

没有解决我的问题，去提问