首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px; 二话不说,先写个这个左上角的圆角示例来看看先,代码如下: <!...rgba(新的颜色值表示法) 1、盒子透明度表示法: .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity...下面再来看看,使用rgba的方式。 2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度 ?...可以看出,rgba这种方式就是再设置一个背景色,并且可以控制透明度,而不会去影响文字内容。 现在可以看到第二个div就是一整个黑色,因为设置了 rgba(0,0,0,1)。...前三个0 就是设置了黑色,最后一个参数 1 就是设置透明度。现在设置为 0.3 看看。 ? 设置了透明度为 0.3 之后, div的背景色就变为了灰色,但是不会影响中间的文字颜色。

1.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Python 技术篇-用PIL库修改图片透明度,改变png图片色道为RGBA、RGB。

    PIL库可以设置图片透明度。 pip install pillow安装了pillow库后就可以使用PIL库了。 我们都知道,图片是由无数个点组成的,300x300像素,就是9万个点。...颜色有两种RGBA和RGB,(r, g, b, a)前者有4个值,后者有3个值,每个都是0到255,RGBA的a就代表透明度。 getpixel((x, y))是获取对应像素点的颜色。...from PIL import Image img = Image.open("安娜的橱窗.jpg") img = img.convert('RGBA') # 修改颜色通道为RGBA x, y = img.size...# 获得长和宽 # 设置每个像素点颜色的透明度 for i in range(x): for k in range(y): color = img.getpixel((i,...加起来就是(r, g, b, 100)达到修改透明度的效果。 运行后的效果图如下: ?

    3.7K20

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

    opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。...一、跨浏览器透明度 现在,透明度(opacity )是CSS3规范的一部分,但是它存在了很长时间。但是,较旧的浏览器具有不同的方式来指定不透明度透明度。...二、Firefox,Safari,Chrome,Opera和IE9中的CSS透明度 当前浏览器中CSS透明度的最新语法。 示例 <!...CSS图像透明度 还可以使用CSS Opacity制作透明图像。 下图中的三个图像均来自同一源图像。它们之间的唯一区别是它们的透明度。 <!...四、总结 本文基于CSS基础,介绍了CSS Opacity改变图片透明度,不同的浏览器中的图片透明度改变的方法。浏览器的兼容性, 改变透明框中的文字,都通过案例的分析进行详细的讲解。

    1.8K10

    【说站】CSS背景颜色的表示方法

    CSS背景颜色的表示方法 1、RGBA表示法,CSS3中新增表示颜色的方式:RGBA或者HSLA。     ...background-color: rgba(0, 0, 255, 0.3);       border: 30px solid rgba(0, 255, 0, 0.3); 代码解释: 2、RGBA即...A 透明度,取值范围 0~1。 关于设置透明度的其他方式: (1)opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说,当盒子设置半透明的时候,会影响里面的子盒子。...(2)background: transparent; 可以单独设置透明度,但设置的是完全透明(不可调节透明度)。 以上就是CSS背景颜色的表示方法,希望对大家有所帮助。...更多css学习指路:css教程 本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    85640

    Sass 基础(七)

    )             RGB 颜色函数-RGBA() 函数       2. rgba() 函数主要用来将一个颜色根据透明度转换成rgba颜色。           ...之中:假设在实际中知道的颜色值是 #f36 或者 red,但在使用中           ,需要给他们配上一个透明度,这个时候在原来的 CSS 中,首先需           要通过制图工具,得到...}         编译出来的 css 代码:           //CSS             .rgba {                 color: rgba...中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度       之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的       透明通道做处理,而后者是控制整个元素的透明度...在 Sass 中,也提供了系列透明函数,只不过这系列的透明函数主要用来处理颜色透明度:       alpha($color) / opacity($color) 获取颜色透明度       rgba

    85150

    CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式

    使用 RGBA 设置背景透明 我们使用 CSS 设置颜色的时候,一般适用十六进制值的颜色,比如黄色就是:#ffff00。其实颜色的值还可以通过 RGBA 的方式来设置。...所以在给背景添加颜色的同时,可以通过第四个参数提供透明度特性,比如设置为 0.3 的效果: 最终透明背景的 CSS 代码为:background:rgba(255, 255, 0, 0.3)。...使用 PHP 将十六进制的颜色值转换成 RGBA 格式 但是我们在后台设置颜色的时候,一般设置成十六进制的颜色值,然后再加上一个透明度: 那么怎么转换成 RGBA 格式呢?...我写了一个函数,使用 PHP 直接将十六进制的颜色值转换成 RGBA 格式或 RGB 格式(没有传递透明度): function wpjam_hex2rgba($color, $opacity=null...')'; } } 这个函数非常简单,只有两个参数,第一个是十六进制的颜色值,第二个是透明度,然后透明度没有传递,则生成颜色的 RGB 值,传递了则生成 RGBA 的值。

    3.2K40

    Hexo博客之butterfly主题优化更换背景

    important 创建层叠样式表 这里以第二个方式,css文件建立的方式有两种。 博主的butterfly主题为:2.3.0 在任意位置创建一个css文件,例如background.css。...(简单来说,就是创建一个txt文件,把名字改为background.css即可。...以相对路径引入 将写好的css文件移动到\Butterfly\source\css\目录下。 ? 然后修改配置文件的引入方式 ?...修改文章页背景及透明度 此项修改主要是修改文章页背后的颜色。默认为白色不透明。 这里我个人建议使用rgba方式,前边的rgb也就是正常的rgb颜色。最后的a代表的是透明度。....layout_post>#post { /* 以下代表白色透明度为0.3 */ background: rgba(255,255,255,.3); } 透明度1 透明度0.5 透明度0

    5K30

    第161天:CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一、有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。...本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。 二、IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。...上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与...finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。...下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。

    1.3K30
    领券