• css写出来显示不出来,而且背景直接没有显示出来


    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 竹莅 2024-07-26 19:19 采纳率: 0% 浏览 6 首页/ 前端 / css写出来显示不出来,而且背景直接没有显示出来 前端框架 *{ margin: 0; padding: 0; box-sizing: border-box;}body{ overflow: hidden;}section{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; bacackgrmound-image: url("images/pn.jpeg"); background-position: center; background-size: cover; animation: animatebg 3s linear infinite;}@keyframes animateBg{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.1); }} span{ position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; background: #fff; border-radius: 50%; box-shadow: 0 0 05px rgba(255,255,255,0.1),0 0 20px rgba(255, 255, 255, 0.1),0 0 10px rgba(255, 255, 255, 0.1); animation: animate 5s linear infinite; } @keyframes animate{ 0%{ transform: rotate(310deg) translateX(1000px); } 100%{ transform: rotate(310deg) translateX(-2000px); } } span::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 1px; background: linear-gradient(90deg #ffffff, transparent); } 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500) ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    1条回答 默认 最新

    • 专家-司宇[在线] 2024-07-26 19:19
      关注

      引自免费微信小程序:皆我百晓生

      从你提供的CSS代码中,我注意到一些可能的问题。让我们逐一解决它们。

      问题一:背景图片没有显示

      你的代码中有一个拼写错误:“bacackgrmound-image”应该是“background-image”。所以应该修正为:

      background-image: url("images/pn.jpeg");
      

      问题二:关于背景图片的其他属性你可能也需要注意,如background的其他属性也需要正确设置以确保背景图片正确显示。例如,你可能需要设置背景重复(background-repeat)、背景位置(background-position)等属性。你的代码中已经设置了背景图片的位置和大小,这些应该足以使背景图片显示。但确保图片路径是正确的,并且图片资源已经加载到服务器或本地。

      问题三:关于动画效果的问题

      你的动画代码看起来是正确的,但请确保浏览器支持CSS动画和转换(transform)。另外,确保动画的关键帧和动画属性的对应关系是正确的。你定义的animateBg动画应该在动画的每个阶段保持背景图片不变。而对于animate动画,它会旋转并移动一个元素,并且它应该在元素中心的位置创建一个白色的圆点,这是预期的效果吗?如果没问题的话,那么这部分代码应该是正确的。如果你遇到任何特定的问题或效果不符合预期,请提供更多详细信息以便我能更好地帮助你。

      修正后的代码示例:

      对于修正后的代码,你将需要对之前提到的拼写错误进行修复,并确保其他属性设置正确。如果还有其他问题或需要进一步的帮助,请提供更多详细信息或具体的错误信息。如果你需要进一步的帮助或遇到其他问题,请随时向我询问。

      评论 编辑记录
      竹莅 2024-07-26 20:19

      *{ margin: 0; padding: 0; box-sizing: border-box;}body{ height: 100vh; overflow: hidden;}section{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-image: url("images/fp.png"); background-position: center; background-size: cover; animation: animatebg 3s linear infinite;}@keyframes animateBg{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.1); }} span{ position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 05px rgba(255,255,255,0.1),0 0 20px rgba(255, 255, 255, 0.1),0 0 10px rgba(255, 255, 255, 0.1); animation: animate 5s linear infinite; } span:nth-child(1){ top: 0; right: 0; left: initial; animation-delay: 0s; animation-duration: 5s; } span:nth-child(2){ top: 0; right: 120px; left: initial; animation-delay: 0.5s; animation-duration: 6s; } span:nth-child(3){ top: 0; right: 280px; left: initial; animation-delay: 1.2s; animation-duration: 5s; } span:nth-child(4){ top: 0; right: 20px; left: initial; animation-delay: 1.3s; animation-duration: 6s; } span:nth-child(5){ top: 0; left: 1300px; animation-delay: 0.3s; animation-duration: 3s; } span:nth-child(6){ top: 0; left: 900px; animation-delay: 1s; animation-duration: 6s; } span:nth-child(7){ top: 0; left: 900px; animation-delay: 0.3s; animation-duration: 2s; } span:nth-child(8){ top: 0; left: 500px; animation-delay: 1.3s; animation-duration: 5s; } span:nth-child(9){ top: 0; left: 1200px; animation-delay: 1.6; animation-duration: 3s; } @keyframes animate{ 0%{ transform: rotate(320deg) translateX(1000px); } 100%{ transform: rotate(320deg) translateX(-2000px); } } span::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 1px; background: linear-gradient(90deg #ffffff, transparent); } 在这个的基础上怎么点缀让他更好看

      回复
      编辑
      预览

      报告相同问题?

    • 相关阅读:
      linux(centos7)常用命令 开启关闭防火墙
      【软考-中级】系统集成项目管理工程师-人力资源管理历年案例
      第八章《Java高级语法》第7节:枚举
      构建可视化工具选择策略
      基于Java汽车租赁系统设计实现(源码+lw+部署文档+讲解等)
      【Java 演示灵活导出任意http、https接口数据】
      为什么你的shopee虾皮店铺越做越垮?极有可能是这三点没做好?
      Linux下的第一个小程序——进度条
      定制开发肯德基自动化网站下单软件
      数据库设计阶段-架构真题(五十七)
    • 原文地址:https://ask.csdn.net/questions/8133189