html img透明度,css如何设置img的不透明度？

使用CSS很容易创建透明的图像；那么css如何设置img的不透明度？下面本篇文章给大家介绍一下CSS 图像透明/不透明。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

方法1：使用opacity属性设置img的不透明度

Opacity属性设置一个元素了透明度级别。

首先，我们将向您展示如何用CSS创建一个透明图像。

正常的图像

相同的图像带有透明度：

看看下面的CSS：img

{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜： filter:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

方法2：使用filter:opacity(%)设置img的不透明度

filter属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

值：opacity(%)

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

示例：

img {

-webkit-filter: opacity(50%);

/* Chrome, Safari, Opera */

filter: opacity(100%);

}

设置img的不透明度:

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

效果图：

更多web前端知识，请查阅 HTML中文网！！

html img透明度,css如何设置img的不透明度？相关推荐

css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
html如何调节透明度,CSS 如何设置一个元素的透明度呢？
摘要: 下文讲述css中设置元素透明度的两种方法分享,如下所示: 在html中,有时我们需对图片,文本设置其透明度,那么到底该如何设置呢?下文讲述使用css脚本设置透明度的方法方法1:使用opaco ...
php中文本框透明度,css怎么设置透明度
工作中我们经常会需要用到CSS代码来设置DIV的透明度,今天给大家来介绍一下,怎样用CSS样式表来设置DIV的透明半透明.希望能帮到大家. 首先说一下设置DIV半透明的CSS代码:div{filter ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css设置背景透明度,css设置背景透明度你需要学习了
css通过设置透明度可以得到遮罩效果,今天咪咪我就来给大家讲解一下css透明度的设置方法. 工具/材料电脑 webstorm 操作方法 01 如图,打开webstorm,然后新建一个html界面,在 ...
css如何设置透明度？两种方法
一.css rgba()设置颜色透明度语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...
css如何设置透明度
css如何设置透明度今天面试遇到了一个之前写css样式时没太注意的问题,关于css如何设置透明度.两种方法如下: css设置透明度的方法:1.使用rgba()设置颜色透明度,语法"back ...
css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...

html img透明度,css如何设置img的不透明度？

html img透明度,css如何设置img的不透明度？相关推荐

最新文章

热门文章