衔叶为笙 2023-02-12 07:46 采纳率: 100%
浏览 38
已结题

::after 效果不显示

img

  1. shishen changef
  2. position:relatives
  3. height:80px
  4. width:80px
  5. margin:4px
  6. margin-bottom: 20px
  7. padding:5px
  8. opacity:0.2;
  9. shishen change::afterf
  10. content:’’;
  11. background-image:url(../images/ban.png)
  12. position:absolute
  13. left:0
  14. top:0
  15. width:80px
  16. height:80px
  17. shishenchange是图片的样式,后面写伪类Q定位一张图片,图片ban.png如下:

img

  • 写回答

3条回答 默认 最新

  • 辉煌仪奇 2023-02-12 08:15
    关注

    你好,看你的图片你是展示出了图片的效果的,不透明度0.2可以设置更小获得图片显示的最佳效果
    按照你的思路我写了个demo,是可以实现你后面截图的效果的,

    img


    下面是参考代码,如有帮助,请点一下采纳,谢谢

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. <style>
    7. .shishen {
    8. width: 300px;
    9. height: 300px;
    10. margin: 4px;
    11. margin-bottom: 20px;
    12. padding: 5px;
    13. opacity: 0.2;
    14. position: relative;
    15. }
    16. .shishen::after{
    17. content: '';
    18. background-image: url("./image/Picture11.jpg") ;
    19. position: absolute;
    20. top: 0;
    21. left: 0;
    22. width: 100%;
    23. height: 100%;
    24. }
    25. </style>
    26. </head>
    27. <body>
    28. <div class="shishen">
    29. </div>
    30. </body>
    31. </html>

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    衔叶为笙 2023-02-12 12:27

    感谢解答,但是问题不是这个
    我根据你的代码写了一下demo,我已经找到答案了
    原因是我把class写到标签,
    不知道为什么写到img标签会显示不出,但是打开开发工具样式又是显示有效的

    回复
    辉煌仪奇 回复 衔叶为笙 2023-02-15 02:44

    你看看路径是否正确,不行的话更换路径位置,相对路径和绝对路径都可以试试

    回复
查看更多回答(2条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 2月19日
  • 已采纳回答 2月12日
  • 创建了问题 2月12日

悬赏问题

  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
  • ¥15 传人记程序做的plc 485从机程序该如何写
  • ¥15 已知手指抓握过程中掌指关节、手指各关节和指尖每一帧的坐标,用贝塞尔曲线可以拟合手指抓握的运动轨迹吗?
  • ¥50 libwebsockets 如何添加其他socket事件回调
  • ¥50 实现画布拖拽算子排布,通过flink实现算子编排计算,请提供思路
  • ¥15 esium自定义材质拉伸问题
  • ¥15 cmake+mingw使用<mysqlx/xdevapi.h>报错
  • ¥15 eNSP中防火墙的使用
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部