怎么使用CSS做图像透明

怎么使用CSS做图像透明

通过 CSS 创建透明图像是很容易的。                              ( 推荐学习:CSS教程 )

注:CSS opacity 属性是 W3C CSS 推荐标准的一部分。

实例 1 – 创建透明图像

定义透明效果的 CSS3 属性是 opacity。

立即学习“前端免费学习笔记(深入)”;

首先,我们将展示如何通过 CSS 来创建透明图像。

常规图像:

cj-112.jpg

带有透明度的相同图像:

cj-113.jpg

请看下面的 CSS:

img{opacity:0.4;filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。

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

以上就是怎么使用CSS做图像透明的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614817.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:35:34
下一篇 2025年12月24日 04:35:51

相关推荐

  • CSS 绝对定位是什么

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。             ( 推荐学习:CSS教程 )…

    好文分享 2025年12月24日
    000
  • css hover的用法

    css hover的用法 CSS :hover 选择器定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示::hover 选择器可用于所有元素,不只是链接。 提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:ac…

    2025年12月24日
    000
  • 如何使用CSS隐藏滚动条?

    本篇文章将介绍如何使用css隐藏页面的滚动条,具有一定的参考价值,希望对学习css的同学有帮助! 如何使用css隐藏滚动条? 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。 想要完全隐藏滚动条只需设置o…

    2025年12月24日
    000
  • dw如何新建css规则

    1、在菜单中单击“文件”选择“新建” 2、在新建文档窗口,选择“空白页”—“HTML”,文档类型选择“XHTML1.0 transitional”,单击“创建”按钮 3、将插入点放在文档中,然后在菜单栏单击“格式”,在弹出的下拉菜单中选择“CSS样式”—“新建” 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • CSS 派生选择器通过什么来定义

    CSS 派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。(推荐学习:CSS视频教程) 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,…

    2025年12月24日
    000
  • CSS的id选择器怎么定义

    CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。   ( 推荐学习:CSS入门教程 ) 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: 立即学习“前端免费学习笔…

    2025年12月24日
    000
  • css的类选择器是怎么样的(代码)

    在 CSS 中,类选择器以一个点号显示:                ( 推荐学习:CSS入门教程 ) .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中,h1 和 p 元素都有 center…

    2025年12月24日
    000
  • CSS的属性选择器使用详解(css入门教程)

    对带有指定属性的 HTML 元素设置样式。        ( 推荐学习:CSS入门教程 ) 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 注:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择…

    2025年12月24日
    000
  • css如何插入样式表

    如何插入样式表 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种: 外部样式表          ( 推荐学习:CSS入门教程 ) 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使…

    2025年12月24日
    000
  • CSS背景怎么设置

    CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。 CSS在这方面的能力远远在 HTML 之上。        ( 推荐学习:CSS基础教程 ) 背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 立即学习“前端免费学习笔记(深入…

    2025年12月24日
    000
  • CSS怎样缩进文本?

    CSS 文本属性可定义文本的外观。 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。        ( 推荐学习:CSS入门教程 ) CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。 立即学习“前端免费学习笔记(深入)”; 通过使用 tex…

    2025年12月24日
    000
  • 在CSS中字体加粗要怎么做?

    字体加粗 font-weight 属性设置文本的粗细。 使用 bold 关键字可以将文本设置为粗体。        ( 推荐学习:CSS基础教程 ) 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变…

    2025年12月24日
    000
  • CSS的表格边框使用什么属性设置

    表格边框 如需在 CSS 中设置表格边框,请使用 border 属性。    ( 推荐学习:CSS入门教程 ) 下面的例子为 table、th 以及 td 设置了蓝色边框: table,th,td{border:1px solid blue;}FirstnameLastnameBillGatesSt…

    2025年12月24日
    000
  • CSS框模型概念介绍

    CSS框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模型概述             ( 推荐学习:CSS基础教程 ) 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距…

    2025年12月24日
    000
  • 清除浮动的css写法有哪些

    本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下  一、float(浮动)是什么 float 属性定义元素在哪个方向浮动。 float:left 元素向左浮动。 float:right 元素向右浮动。 立即学习“前端免费学习笔…

    2025年12月24日 好文分享
    000
  • sass系统是什么

    sass2007年诞生,最早也是最成熟的css预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受less影响,已经进化到了全面兼容css的scss。 Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Cat…

    2025年12月24日
    000
  • css全称

    css层叠样式表(英文全称:cascading style sheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。(推荐学习:CSS3视频教程…

    2025年12月24日
    000
  • css如何实现表格实线

    利用在css设置表格实线: 代码如下: table{border-collapse:collapse; /*表示将单元格中各小格之间的空隙进行合并*/border:1px #00F solid; /*定义边框样式*/} 示例: 无标题页table { border-collapse: collaps…

    2025年12月24日
    000
  • css样式属性是什么

    推荐教程:CSS教程 简介   层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。  …

    2025年12月24日
    000
  • CSS滤镜和混合模式处理的图片如何上传下载?

    一、使用CSS滤镜和混合模式在线PS(推荐学习:CSS视频教程) 使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,例如CSSgram项目,内置众多图像处理效果,部分效果示意如下缩略图: 进入demo页面你也可以点击这里的按钮,更换你本地的素材,查看对应的图像效果: 立即学习“前端免费学习笔记…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信