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

IT618应用中心 · 发表于昨天 21:02

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

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

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

图1/2/3

现实浏览网址oobb.cc

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

小冰 · 发表于昨天 21:02

         群图标也存在这个问题。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;}

ysx24 · 发表于昨天 21:03

这和你上传的环境组件有关系，GD和IM效果不一样，同一个环境组件下不同版本效果也不同。图像处理一般都是调用这些组件处理的，而不是程序本身

月落秋水 · 发表于昨天 21:04

我发现好像是用了自动缩略图后成了jpg的原因。不知道如何解决。

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

本帖子中包含更多资源

本帖子中包含更多资源

关于我们

服务支持

点我~