首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一篇文章带你了解CSS Opacity(透明度)

    一、跨浏览器透明度 现在,透明度(opacity )是CSS3规范的一部分,但是它存在了很长时间。但是,较旧的浏览器具有不同的方式来指定不透明度或透明度。...二、Firefox,Safari,Chrome,Opera和IE9中的CSS不透明度 当前浏览器中CSS不透明度的最新语法。 示例 CSS图像透明度 还可以使用CSS Opacity制作透明图像。 下图中的三个图像均来自同一源图像。它们之间的唯一区别是它们的透明度。 <!...四、总结 本文基于CSS基础,介绍了CSS Opacity改变图片透明度,不同的浏览器中的图片透明度改变的方法。浏览器的兼容性, 改变透明框中的文字,都通过案例的分析进行详细的讲解。...欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。 代码很简单,希望能够帮助你更好的学习。

    3.1K10

    CSS3圆角、opacity 透明度、rgba 背景色设置

    CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px; 二话不说,先写个这个左上角的圆角示例来看看先,代码如下: <!...=10); } 接着上面的代码示例,写个透明度的效果来看看,如下: ?...这种方式有个问题,就是会把div里面的字体一起透明化。下面写一些文字看看。 ? 从上图可以看出opacity这种方式会将div内的字体一起透明化。那么有没有只让div透明化,但是字体不会透明化呢?...2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度 ? 可以看出,rgba这种方式就是再设置一个背景色,并且可以控制透明度,而不会去影响文字内容。...前三个0 就是设置了黑色,最后一个参数 1 就是设置透明度。现在设置为 0.3 看看。 ? 设置了透明度为 0.3 之后, div的背景色就变为了灰色,但是不会影响中间的文字颜色。

    2.1K30

    移动端圆环进度动画方案(透明背景-透明度圆环-css3版)

    首先说一下我们这个要实现的圆环进度动画,有三个特点: 1、背景是透明的,所以用遮挡实现的方法就不用考虑了; 2、圆环颜色是有透明度的,所以用两个半圆环实现大于180度的圆环效果不能有叠加部分; 3、最好用纯...css3简洁的实现。...然后要备注下重点: 我们的动画效果要应用在移动端,尤其是有些性能较差的安卓手机,所以一定要考虑性能问题。 先上效果图: ?...,是需要两段动画拼接的,左半边的圆环先旋转180度到右半边,右半边的圆环再旋转相应的度数至左半边,这里旋转角度不是固定的,需要根据具体进度确定,所以这种方案右半边的圆环旋转多少度是通过js赋值的,那么问题来了...那么换一种思维方式,我们有了第二版解决方案: 利用纯css控制两个半圆环动画的执行,让两个半圆环动画都固定旋转180度,时间差固定,我们要控制的就是可视区域的角度。

    2.2K30

    CSS问题精粹1

    1.关于消除列表前的符号我相信很多人在初学CSS时会遇到该问题,无论是创作导航,还是列表,前面都会有个黑点点或其它符号。...解决该问题其实很简单采用list-style-type:none或list-style:none直接解决如果你想更换前面的黑点点,换成其他符号或图片图标 请看下面------>>>>>>2.如何插入或更换列表前的图标...注意事项:项目符号图片的大小、颜色、透明度等属性可以通过其他CSS属性进行设置。项目符号图片需要是透明背景的PNG格式,以免遮挡列表文本。...示例代码如下ul, ol { padding-left: 0;} li { margin-left: 0;}聊完列表,我们可以看看背景4.background-image的全覆盖重复问题像这种会自动铺满重复排列背景图片...例如,如果你想要设置文字缩进为20像素,可以使用以下代码:p { text-indent: 20px;}欢迎关注本人CSDN:CSS问题精粹1-CSDN博客互关谢谢大家

    57610

    CSS margin合并问题

    CSS 外边距合并问题 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。...如何解决 使用BFC解决margin合并问题可以参考这篇文章:CSS中重要的BFC 3.1 自身margin合并的情况 加个padding或者border-top/border-bottom 3.2.../scroll; 子元素的margin使用父元素的padding代替 ---- 网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~ 参考: CSS...外边距合并的问题 深入理解css中的margin属性 深入理解BFC和Margin Collapse

    1.9K30

    CSS问题精粹1

    1.关于消除列表前的符号 我相信很多人在初学CSS时会遇到该问题,无论是创作导航,还是列表,前面都会有个黑点点或其它符号。...解决该问题其实很简单 采用list-style-type:none或list-style:none直接解决 如果你想更换前面的黑点点,换成其他符号或图片图标 请看下面------>>>>>> 2.如何插入或更换列表前的图标...注意事项: 项目符号图片的大小、颜色、透明度等属性可以通过其他CSS属性进行设置。 项目符号图片需要是透明背景的PNG格式,以免遮挡列表文本。...如果还想清除前面的空格 3.如何清除前面的空格间隙 使用CSS的margin属性,将li元素的margin-left设置为0。...示例代码如下 ul, ol { padding-left: 0; } li { margin-left: 0; } 聊完列表,我们可以看看背景 4.background-image的全覆盖重复问题

    45310

    移动端圆环进度动画方案(透明背景-透明度圆环-css3版)

    首先说一下我们这个要实现的圆环进度动画,有三个特点: 1、背景是透明的,所以用遮挡实现的方法就不用考虑了; 2、圆环颜色是有透明度的,所以用两个半圆环实现大于180度的圆环效果不能有叠加部分; 3、最好用纯...css3简洁的实现。...然后要备注下重点: 我们的动画效果要应用在移动端,尤其是有些性能较差的安卓手机,所以一定要考虑性能问题。 先上效果图: ?...,是需要两段动画拼接的,左半边的圆环先旋转180度到右半边,右半边的圆环再旋转相应的度数至左半边,这里旋转角度不是固定的,需要根据具体进度确定,所以这种方案右半边的圆环旋转多少度是通过js赋值的,那么问题来了...那么换一种思维方式,我们有了第二版解决方案: 利用纯css控制两个半圆环动画的执行,让两个半圆环动画都固定旋转180度,时间差固定,我们要控制的就是可视区域的角度。

    2.2K80

    win2d 通过 CanvasActiveLayer 画出透明度和裁剪 创建 CanvasActiveLayer 方法透明度透明度图片裁剪

    本文告诉大家如果在 UWP 的 win2d 通过 CanvasActiveLayer 创建一层,在这里画出的图片有透明度或者裁剪 在 win2d 如果需要对某个元素裁剪,可以使用很多方法,本文只是告诉大家使用图层的方法裁剪...// 这里面写的代码会在这个 Layer 里面 } // 在外面写的代码不会添加到这个 layer 里面 透明度...} // 在这里写的代码是普通的 } } 这里的 CreateLayer 有很多重载,现在使用的是一个传入透明度的方法...,这里的透明度使用 [0,1] 的范围 在 using 里面画出的内容就会加上了这里设置的值,如我需要画出 0.6 的圆形 using (var canvasActiveLayer =...从代码可以看到 CreateLayer 的设计是创建一个简单的方法,在这个方法里面可以快速设置画出的界面,同时在这个方法外面将会和之前一样 透明度图片 除了直接设置透明度的值,还可以设置透明度的 Brush

    2.2K20
    领券