css图片怎么设置透明度-前端问答-PHP中文网

首页

web前端

前端问答

css图片怎么设置透明度

藏色散人

Apr 09, 2021 am 10:11 AM

css

在css中可以通过opacity属性来设置图片透明度，该属性的使用语法是“opacity:value|inherit;”，其中参数value规定不透明度，而inherit表示应该从父元素继承opacity属性的值。

css图片怎么设置透明度

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

opacity 属性设置元素的不透明级别。

语法

opacity: value|inherit;

value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。测试

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

我们来看css中opacity属性设置图片透明度的例子：

css：
.opacity1, .opacity2, .opacity_img { display: inline-block; }
.opacity1 { filter: Alpha(opacity=0); }
.opacity2 { filter: Alpha(opacity=50); }
.opacity_img { filter: Alpha(opacity=100); }
:root .opacity1 { opacity: 0; filter: none; }
:root .opacity2 { opacity: .5; filter: none; }
:root .opacity_img { opacity: 1; filter: none; }
html：
<p>
    <a href="#" class="opacity2">
        <img class="opacity_img" src="
        " />
    </a>
</p>
<p>
    <a href="#" class="opacity2">
        <img class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    </a>
</p>

效果图：

注意：

目前主流的浏览器都支持opacity:value写法，value取值为0-1，0为完全透明，1为完全不透明。

但是在IE8及之前的版本中是不支持这种写法，那么我们可以通过滤镜来解决 filter:alpha(opacity=value)，value取值为0-100，0为完全透明，100为完全不透明。就像上面例子那样。

【推荐学习：css视频教程】

以上是css图片怎么设置透明度的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

显示更多

Related knowledge

如何使用纯CSS创建下拉菜单 Sep 20, 2025 am 02:19 AM

使用HTML和CSS可创建无需JavaScript的下拉菜单。2.通过:hover伪类触发子菜单显示。3.利用嵌套列表构建结构，CSS设置隐藏与悬浮显示效果。4.可添加过渡动画提升视觉体验。

如何使用CSS中的指针事件属性 Sep 17, 2025 am 07:30 AM

Thepointer-eventspropertyinCSScontrolswhetheranelementcanbethetargetofpointerevents.1.Usepointer-events:nonetodisableinteractionslikeclicksorhoverswhilekeepingtheelementvisuallyvisible.2.Applyittooverlaystoallowclick-throughbehaviortounderlyingelemen

如何防止图像拉伸或缩小CSS Sep 21, 2025 am 12:04 AM

useobject-fitormax-widthwithheight：自动置换式; object-fitControlshowimagesfillcontainersfillcontainerswhilepreservingaspectratios，andmax-width：100％;高度；高度：autoEsoensuresResresresResresRessersRessiveScalingScalingWithOutStertracterging。

如何使用CSS添加盒子阴影效果 Sep 20, 2025 am 12:23 AM

USETHEBOX-SHADOWPROPERTYTOADDDROPSHADOWS.DEFINEHORIZONTALANDVERTICALESTESETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETESTESTESTESTESTESTEMENG：MMULTIPLESHADOWSARECOMMA-SEPARAWS.MEULTIPLESHADOWSARECOMMA-SEPARATED.EXAMPL

如何在CSS中使用clamp（）函数进行响应式版式 Sep 23, 2025 am 01:24 AM

clamp()函数通过最小、首选和最大值实现响应式字体缩放；2.语法为clamp(最小值,首选值,最大值)，常用rem和vw单位；3.字体在小屏取最小值，随屏幕增大按vw缩放，不超过最大值；4.合理选择数值确保可读性，避免过大或过小；5.结合rem类型比例提升设计一致性。

如何使用CSS转换创建3D立方体 Sep 19, 2025 am 02:17 AM

使用CSS3D变换创建立方体需结合transform、perspective和transform-style属性；2.HTML结构包含一个容器和六个面；3.通过translateZ和rotate调整每个面的位置和朝向；4.设置preserve-3d确保子元素在3D空间渲染；5.可添加旋转动画增强立体效果。