账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    求教:webp格式,CSS两个Picture标签出问题,一个重复,一个不显示
    29
    0

    Wordpress, 购买的国外的模板,用常规图片格式是没问题的,但是用插件生成了WEBP格式图片,其他都正常,就这两个部分有问题! 因为wordpress本身不支持webp,所以那些模板作者也不提供支持,只能到这来问了!

    以下LOGO部分,重复显示了webp 和 png 的LOGO (即同时显示了两张图)

    <picture class="normal-logo">
    <source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png.webp"/>
    <img src="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png" alt="xxx"/>
    </picture>

    以下一个区块的内容,图片不显示:(空白,不显示)

    <picture class="img bg-image">
    <source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg.webp 580w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-150x150.jpg.webp 150w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-320x320.jpg.webp 320w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-100x100.jpg.webp 100w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-40x40.jpg.webp 40w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-500x500.jpg.webp 500w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-30x30.jpg.webp 30w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-550x550.jpg.webp 550w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-32x32.jpg.webp 32w" sizes="(max-width: 580px) 100vw, 580px">
    <img width="580" height="580" src="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg" alt="xxx Creative Life Store - Live A Creative Life with xxx!" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg 580w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-150x150.jpg 150w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-320x320.jpg 320w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-100x100.jpg 100w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-40x40.jpg 40w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-500x500.jpg 500w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-30x30.jpg 30w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-550x550.jpg 550w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-32x32.jpg 32w" sizes="(max-width: 580px) 100vw, 580px">
    </picture>

    网站地址没放! 通过代码好像没看出哪有问题,出现这问题是为什么呢 ?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 心痛的网名繁体字 普通会员 1楼

      WebP格式是一种图片格式,与CSS中的Picture标签有关系,但是当CSS中的Picture标签出现问题时,可能会导致图片重复或者不显示的问题。

      图片重复的原因可能有以下几点:

      1. CSS图片样式问题:如果图片的CSS样式设置错误,可能会导致图片重复显示。例如,图片的宽度设置得过小或者过大,或者图片的背景颜色设置得不正确,都会导致图片重复显示。

      2. 图片路径问题:如果图片的路径设置错误,可能会导致图片重复显示。例如,图片的路径写成了相对路径,而实际图片的文件路径是相对或绝对路径,就会导致图片重复显示。

      3. 图片尺寸问题:如果图片的尺寸设置得过小或者过大,可能会导致图片重复显示。例如,图片的宽度设置得过小,图片的高度设置得过大,都会导致图片重复显示。

      4. 图片文件问题:如果图片文件的格式不正确,可能会导致图片重复显示。例如,图片文件的格式是.png,而实际图片的格式是.webp,就会导致图片重复显示。

      解决图片重复问题的方法主要有以下几点:

      1. 检查CSS图片样式和路径:确保图片的样式和路径设置正确,避免图片重复显示。

      2. 检查图片尺寸:确保图片的尺寸设置正确,避免图片重复显示。

      3. 检查图片文件格式:确保图片的文件格式正确,避免图片重复显示。

      4. 使用专门的工具检查:可以使用专门的图片压缩工具,检查图片的重复问题。

      5. 使用浏览器的开发者工具:可以使用浏览器的开发者工具,检查图片的重复问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部