文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > css教程 > 正文

如何给background-image设置透明度？

黄舟
发布： 2017-07-20 09:52:54
原创
27487人浏览过

如题，现在是没法改图片本身的透明度，该图片以 background-image 写在 css 里，不知道有没有办法给他设置透明度？

div{
    position: relative;        
}
div:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}
登录后复制

背景图用png，有透明度。

元素设置透明度当背景，另一个元素遮盖到上面 客串下它儿子，假装是这个元素的内容。

css的opacity属性可以设置图片的透明属性，

#div{
    background-image: url(img.png);
    opacity:0.4;
    filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ }
登录后复制

无法改变图片本身的透明度，那只能改变整个DIV的透明度来达到类似的视觉效果：
1.opacity属性
2.如果兼容性允许的话使用css3滤镜-webkit-filter（有别于之前的IE滤镜）。

看下这个网站的实现办法

Opacity in CSS background images
登录后复制

以上就是如何给background-image设置透明度？的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：css如何实现响应式文字大小变化实例详解 下一篇：css如何元素设置背景为透明的实例分析（图文）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
css中em和rem有什么区别 css单位em与rem的差异解析 em是基于父元素字体大小计算的相对单位，rem是基于根元素字体大小计算的相对单位。1.em在嵌套元素中容易产生级联效果，可能导致意外的字体大小。2.rem更为直观和可控，适合响应式设计和全局字体调整。3.em适用于需要相对父元素缩放的场景，如按钮设计。4.em累积效应可能导致字体大小迅速变化，可用rem或px重置。5.建议项目中统一使用一种单位，rem可与CSS预处理器结合使用。
2025-06-24 16:29:02
451
css中pt指什么 css中pt单位的含义解析 在CSS中，pt代表“点”，是一个起源于印刷行业的长度单位，相当于1/72英寸。pt单位在需要精确控制打印效果的场景下非常有用，但在不同DPI设备上的显示可能不一致，适合结合px使用。
2025-06-24 15:55:02
610
CSS中backface-visibility属性hidden和visible的作用 backface-visibility属性用于控制元素在3D变换中的背面是否可见，取值为visible或hidden。1.visible使背面始终可见，适用于两面显示内容或过渡动画；2.hidden则隐藏背面，常用于翻转卡片等真实视觉效果；3.使用时需注意：仅在支持3D变换时生效，通常配合transform-style:preserve-3d，需关注移动端兼容性，且要注意z-index层级设置避免内容消失。理解其作用需结合具体变换环境和上下文结构。
2025-06-24 15:41:06
268
CSS如何制作骨架屏？CSS加载占位动画技巧 骨架屏是通过CSS实现的加载过渡效果，核心在于使用HTML结构与CSS动画模拟内容轮廓并提升用户体验。具体步骤包括：1.使用HTML搭建无内容的页面结构；2.通过CSS设置浅灰色背景与动画实现动态闪烁效果；3.利用border-radius或clip-path控制骨架屏形状；4.数据加载完成后通过JavaScript移除骨架屏；5.优化性能时避免复杂形状、使用CSS动画并减少重绘重排；6.可根据网络环境动态调整骨架屏复杂程度；7.骨架屏区别于loading动画，其优势在于提供内容预期而非单纯提示
2025-06-24 15:04:02
253
css中的var是什么意思 css中var变量的功能解析 在CSS中，var函数允许使用自定义属性值，使样式表更灵活和易于维护。使用var的好处包括：1.集中管理样式值，修改一个变量即可更新所有使用该变量的地方；2.可以设置备用值，确保即使变量不存在也能应用默认值；3.变量可嵌套使用，提高灵活性；4.适用于主题颜色和间距管理，方便切换主题风格。
2025-06-24 14:25:01
445
css如何调整元素层级？css层级属性使用指南 z-index属性用于控制元素的堆叠顺序，数值越大越靠前。要使用z-index，必须为元素设置非static的position值（如relative、absolute、fixed或sticky），否则该属性无效。堆叠上下文会影响z-index的表现，某些CSS属性（如transform、opacity、filter等）会创建新的堆叠上下文，导致子元素的z-index仅在该上下文中生效。常见问题包括：1.忘记设置position导致z-index无效；2.父元素堆叠上下文限制子元素层级；3.z-i
2025-06-24 14:09:02
341
css中100vh是什么 css中100vh单位的含义解释 100vh在CSS中代表视口高度的100%，常用于创建全屏布局和确保元素高度与视口一致。100vh适应浏览器窗口大小变化，适用于响应式设计，但需注意移动设备上的视口计算问题。
2025-06-24 14:04:02
943
css如何实现响应式布局？css响应式设计教程 响应式布局的核心是通过媒体查询、Flexbox、Grid等技术组合，使网页自动适配不同设备。1.媒体查询根据屏幕特性应用不同CSS规则；2.Flexbox用于一维布局，Grid用于二维布局，二者结合实现灵活结构；3.响应式图片可通过srcset、picture元素或CSS背景图实现；4.排版使用相对单位、viewport单位和clamp函数优化阅读体验；5.测试需借助浏览器工具、在线工具及真实设备；6.最佳实践包括移动优先、内容优先、保持简洁和使用框架；7.常见问题如图片变形、文本溢出等可通过相
2025-06-24 13:46:01
237
margin在css中什么意思 css中margin属性的含义详解 在CSS中，margin属性用于控制元素与其周围元素之间的空白区域。1.margin定义了元素边框外围的空间，影响布局和间距。2.可以设置上、右、下、左四个方向的外边距，使用长度值、百分比或auto。3.负值可使元素向相反方向移动，但需谨慎使用。4.外边距折叠是指相邻元素的外边距合并，而不是累加。5.建议减少margin使用，优先使用padding和现代布局方法，简化值以优化性能。
2025-06-24 13:26:01
418
css中span什么意思 css中span标签的定义解析 span在CSS中用于包装文本或内联元素，以便应用样式或脚本操作。1.它是内联元素，不携带视觉意义，但可通过CSS赋予样式。2.常用于精细排版控制，如改变文本颜色、字体、背景。3.可嵌套在其他元素中，但需避免滥用。4.可与CSS伪类结合，创造动态效果。5.注意其默认不换行，可通过display属性调整。6.过度使用可能影响SEO和性能，需谨慎使用并优化。
2025-06-24 12:52:02
412
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部