社区首页DIY，调用社区分类信息模版，上传png图片不透明问题求解？ New

𝕷𝖎𝖑𝖏𝖆𝖈𝖐 · 发表于 2025-11-6 09:32:08

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

社区首页DIY，调用社区分类信息模版，上传png图片不透明问题求解。试了各种代码，也无法解决，不知道是否有同样问题的人。

调用社区类模块显示的png图片是正常的，如图1。

调用展示类分类信息，用的是后天编辑的模版，png显示就出现不透明的情况。如图2/3。

社区首页DIY，调用社区分类信息模版，上传png图片不透明问题求解？
New png,调用,社区,图片,不透明

社区首页DIY，调用社区分类信息模版，上传png图片不透明问题求解？
New png,调用,社区,图片,不透明

图1/2/3

现实浏览网址oobb.cc

我知道答案回答被采纳将会获得1 贡献已有1人回答

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

婷姐 · 发表于 2025-11-6 09:33:03

         群图标也存在这个问题。png图标不透明。


.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.images-style-normal .images-tool { --bg-color:#cdd1e0; --front-color:#388ae5; --border-color:#e8e8eb;}.images-style-normal .images-tool__image { border-radius:3px; overflow:hidden; margin-bottom:10px; padding-bottom:0}.images-style-normal .images-tool__image-picture { max-width:100%; vertical-align:bottom; display:block; margin:0 auto}.images-style-normal .images-tool__image-preloader { width:50px; height:50px; border-radius:50%; background-size:cover; margin:auto; position:relative; background-color:#cdd1e0; background-position:center center}.images-style-normal .images-tool__image-preloader:after { content:""; position:absolute; z-index:3; width:60px; height:60px; border-radius:50%; border:2px solid #cdd1e0; border-top-color:#388ae5; left:50%; top:50%; margin-top:-30px; margin-left:-30px; animation:image-preloader-spin 2s infinite linear; box-sizing:border-box}.images-style-normal .images-tool__images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:10px}.images-style-normal .images-tool__image-item { position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5}.images-style-normal .images-tool__remove-button { top:5px; right:5px; width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10}.images-style-normal .images-tool__image-item:hover .images-tool__remove-button { opacity:1}.images-style-normal .images-tool__caption { bottom:0; left:0; margin-bottom:10px; text-align: center;       font-size: 14px;       color: #a3a3a3;}.images-style-normal .images-tool__caption[contentEditable=true][data-placeholder]:before { position:absolute!important; content:attr(data-placeholder); color:#707684; font-weight:400; display:none}.images-style-normal .images-tool__caption[contentEditable=true][data-placeholder]:empty:before { display:block}.images-style-normal .images-tool__caption[contentEditable=true][data-placeholder]:empty:focus:before { display:none}.images-style-normal .images-tool--empty .images-tool__image,.images-style-normal .images-tool--empty .images-tool__image-preloader { display:none}.images-style-normal .images-tool--empty .images-tool__caption,.images-style-normal .images-tool--uploading .images-tool__caption { visibility:hidden!important}.images-style-normal .images-tool .cdx-button { display:flex; align-items:center; justify-content:center}.images-style-normal .images-tool .cdx-button svg { height:auto; margin:0 6px 0 0}.images-style-normal .images-tool--filled .cdx-button,.images-style-normal .images-tool--filled .images-tool__image-preloader { display:none}.images-style-normal .images-tool--uploading .images-tool__image { min-height:200px; display:flex; border:1px solid #e8e8eb; background-color:#fff}.images-style-normal .images-tool--uploading .images-tool__image-picture,.images-style-normal .images-tool--uploading .cdx-button { display:none}.images-style-normal .images-tool--withBorder .images-tool__image { border:1px solid #e8e8eb}.images-style-normal .images-tool--withBackground .images-tool__image { padding:15px; background:#cdd1e0}.images-style-normal .images-tool--withBackground .images-tool__image-picture { max-width:60%; margin:0 auto}.images-style-normal .images-tool--stretched .images-tool__image-picture { width:100%}.images-style-normal .images-tool--caption .images-tool__caption { visibility:visible}.images-style-normal .images-tool--caption { padding-bottom:50px; text-align: center;       font-size: 14px;       color: #a3a3a3;}@keyframes image-preloader-spin { 0% { transform:rotate(0)}to { transform:rotate(360deg)}}.images-style-normal .images-tool__images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:10px; min-height:100px}.images-style-normal .images-tool__image-item { position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5; transition:all .2s ease; cursor:grab}.images-style-normal .images-tool__image-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px #0000001a}.images-style-normal .images-tool__image-item:active { cursor:grabbing}.images-style-normal .images-tool__image-item[draggable=true] { -webkit-user-select:none; user-select:none}.images-style-normal .images-tool__image-item.dragging { opacity:.5; transform:scale(1.05); z-index:100}.images-style-normal .images-tool__drag-indicator { position:absolute; width:4px; background-color:#388ae5; border-radius:2px; pointer-events:none; z-index:1000}.images-style-normal .images-tool__actions-container { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0; transition:opacity .2s; z-index:10}.images-style-normal .images-tool__image-item:hover .images-tool__actions-container { opacity:1}.images-style-normal .images-tool__move-button { width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:#333; transition:all .2s}.images-style-normal .images-tool__move-button:hover,.images-style-normal .images-tool__remove-button:hover { background-color:#fff; transform:scale(1.1); box-shadow:0 2px 4px #0003}.images-style-normal .images-tool__move-button:disabled { opacity:.5; cursor:not-allowed; transform:none}/* *  以下是瀑布流样式 */.images-style-waterfall .images-tool { --bg-color:#cdd1e0; --front-color:#388ae5; --border-color:#e8e8eb;}.images-style-waterfall .images-tool__image { border-radius:3px; overflow:hidden; margin-bottom:10px; padding-bottom:0}.images-style-waterfall .images-tool__image-picture { max-width:100%; vertical-align:bottom; display:block; margin:0 auto}.images-style-waterfall .images-tool__image-preloader { width:50px; height:50px; border-radius:50%; background-size:cover; margin:auto; position:relative; background-color:#cdd1e0; background-position:center center}.images-style-waterfall .images-tool__image-preloader:after { content:""; position:absolute; z-index:3; width:60px; height:60px; border-radius:50%; border:2px solid #cdd1e0; border-top-color:#388ae5; left:50%; top:50%; margin-top:-30px; margin-left:-30px; animation:image-preloader-spin 2s infinite linear; box-sizing:border-box}/* 修改为瀑布流布局 */.images-style-waterfall .images-tool__images-grid { column-count: 2; column-gap: 10px; margin-bottom: 10px;}@media (min-width: 768px) { .images-style-waterfall .images-tool__images-grid { column-count: 3; }}@media (min-width: 1024px) { .images-style-waterfall .images-tool__images-grid { column-count: 4; }}.images-style-waterfall .images-tool__image-item { break-inside: avoid; margin-bottom: 10px; position:relative; border-radius:3px; overflow:hidden; background-color:#f5f5f5; transition:all .2s ease; cursor:grab}.images-style-waterfall .images-tool__image-item img { width: 100%; height: auto; display: block;}.images-style-waterfall .images-tool__remove-button { top:5px; right:5px; width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10}.images-style-waterfall .images-tool__image-item:hover .images-tool__remove-button { opacity:1}.images-style-waterfall .images-tool__caption { bottom:0; left:0; margin-bottom:10px; text-align: center;       font-size: 14px;       color: #a3a3a3;}.images-style-waterfall .images-tool__caption[contentEditable=true][data-placeholder]:before { position:absolute!important; content:attr(data-placeholder); color:#707684; font-weight:400; display:none}.images-style-waterfall .images-tool__caption[contentEditable=true][data-placeholder]:empty:before { display:block}.images-style-waterfall .images-tool__caption[contentEditable=true][data-placeholder]:empty:focus:before { display:none}.images-style-waterfall .images-tool--empty .images-tool__image,.images-style-waterfall .images-tool--empty .images-tool__image-preloader { display:none}.images-style-waterfall .images-tool--empty .images-tool__caption,.images-style-waterfall .images-tool--uploading .images-tool__caption { visibility:hidden!important}.images-style-waterfall .images-tool .cdx-button { display:flex; align-items:center; justify-content:center}.images-style-waterfall .images-tool .cdx-button svg { height:auto; margin:0 6px 0 0}.images-style-waterfall .images-tool--filled .cdx-button,.images-style-waterfall .images-tool--filled .images-tool__image-preloader { display:none}.images-style-waterfall .images-tool--uploading .images-tool__image { min-height:200px; display:flex; border:1px solid #e8e8eb; background-color:#fff}.images-style-waterfall .images-tool--uploading .images-tool__image-picture,.images-style-waterfall .images-tool--uploading .cdx-button { display:none}.images-style-waterfall .images-tool--withBorder .images-tool__image { border:1px solid #e8e8eb}.images-style-waterfall .images-tool--withBackground .images-tool__image { padding:15px; background:#cdd1e0}.images-style-waterfall .images-tool--withBackground .images-tool__image-picture { max-width:60%; margin:0 auto}.images-style-waterfall .images-tool--stretched .images-tool__image-picture { width:100%}.images-style-waterfall .images-tool--caption .images-tool__caption { visibility:visible}.images-style-waterfall .images-tool--caption { padding-bottom:50px; text-align: center;       font-size: 14px;       color: #a3a3a3;}@keyframes image-preloader-spin { 0% { transform:rotate(0)}to { transform:rotate(360deg)}}/* 移除重复的样式定义，保留瀑布流相关的样式 */.images-style-waterfall .images-tool__image-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px #0000001a}.images-style-waterfall .images-tool__image-item:active { cursor:grabbing}.images-style-waterfall .images-tool__image-item[draggable=true] { -webkit-user-select:none; user-select:none}.images-style-waterfall .images-tool__image-item.dragging { opacity:.5; transform:scale(1.05); z-index:100}.images-style-waterfall .images-tool__drag-indicator { position:absolute; width:4px; background-color:#388ae5; border-radius:2px; pointer-events:none; z-index:1000}.images-style-waterfall .images-tool__actions-container { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0; transition:opacity .2s; z-index:10}.images-style-waterfall .images-tool__image-item:hover .images-tool__actions-container { opacity:1}.images-style-waterfall .images-tool__move-button { width:24px; height:24px; background-color:#ffffffe6; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:#333; transition:all .2s}.images-style-waterfall .images-tool__move-button:hover,.images-style-waterfall .images-tool__remove-button:hover { background-color:#fff; transform:scale(1.1); box-shadow:0 2px 4px #0003}.images-style-waterfall .images-tool__move-button:disabled { opacity:.5; cursor:not-allowed; transform:none}.inline-code {  background: rgba(250, 239, 240, 0.78);  color: #b44437;  padding: 3px 4px;  border-radius: 5px;  margin: 0 1px;  font-family: inherit;  font-size: 0.86em;  font-weight: 500;  letter-spacing: 0.3px;}