V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jeblur
V2EX  ›  问与答

请教一个前端问题。。

  •  
  •   jeblur · 2020-05-15 10:48:01 +08:00 · 2630 次点击
    这是一个创建于 1686 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如何让这个登陆框嵌在整个背景里而不是像现在这样像是切开了整个背景图片然后穿插到中间 homepage

    有 css 文件,但不知道如何去改 css

    25 条回复    2020-05-15 19:21:30 +08:00
    cjc2017
        1
    cjc2017  
       2020-05-15 11:09:14 +08:00
    中间登录框白色的背景改下透明度
    wildnode
        2
    wildnode  
       2020-05-15 11:18:42 +08:00
    这背景是左右各一张么?
    murmur
        3
    murmur  
       2020-05-15 11:19:21 +08:00
    background 用 transparent 就可以,或者 rgba 可以调出叠加淡淡的灰度
    hahahahaha234
        4
    hahahahaha234  
       2020-05-15 11:25:27 +08:00
    opacity
    jeblur
        5
    jeblur  
    OP
       2020-05-15 11:26:09 +08:00
    @wildnode 是一整张
    murmur
        6
    murmur  
       2020-05-15 11:30:00 +08:00   ❤️ 1
    @hahahahaha234 opacity 的透明度影响里面的元素,rgba 叠加才不影响
    jeblur
        7
    jeblur  
    OP
       2020-05-15 11:36:32 +08:00
    问下各位大佬,CSS 里面的 color 的颜色是什么意思
    murmur
        8
    murmur  
       2020-05-15 11:38:49 +08:00
    @jeblur 文字颜色,这种应该去查手册,不需要问啊
    stuartTin
        9
    stuartTin  
       2020-05-15 11:43:45 +08:00
    @wildnode 老哥咱俩头像挺有缘啊
    ccyu220
        10
    ccyu220  
       2020-05-15 11:46:17 +08:00
    这种其实你放个线上演示地址更好解决。如果只看图的话,不好表述。
    jeblur
        11
    jeblur  
    OP
       2020-05-15 11:48:41 +08:00
    @murmur 在.ui-body-a, .ui-overlay-a {}标签下增加了 background: transparent 都没有效果,不知道哪里错了。
    以我的理解打开页面之后 F12 点选背景可以看到标签,但不知道这个标签是否跟 CSS 文件相关联
    zhyl
        12
    zhyl  
       2020-05-15 11:48:55 +08:00 via Android
    把红线框出来的地方去掉就不觉得是左右两张图了🐶
    jeblur
        13
    jeblur  
    OP
       2020-05-15 11:49:59 +08:00
    @ccyu220 公司的 portal 地址,放出来怕被攻击。。不过这样确实可能不好根本解决问题
    IGJacklove
        14
    IGJacklove  
       2020-05-15 11:53:39 +08:00
    给个绝对定位呗,谁没事会来攻击你这种网站...
    otakustay
        15
    otakustay  
       2020-05-15 11:54:43 +08:00
    登录框只有中间一小块(不包括红框部分),绝对定位或者 flex 啥的办法怼到正中央就行了,再给背景加点透明
    GzhiYi
        16
    GzhiYi  
       2020-05-15 11:56:14 +08:00
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    jeblur
        17
    jeblur  
    OP
       2020-05-15 12:09:50 +08:00 via Android
    @zhyl 关键问题是这个是系统自带的不知道去掉会不会有问题,而且暂时还没定位到这个部分在 css 文件中的位置
    wildnode
        18
    wildnode  
       2020-05-15 12:32:38 +08:00 via iPhone
    @stuartTin 哈哈哈哈你会杂技
    qiayue
        19
    qiayue  
       2020-05-15 12:42:52 +08:00
    初级前端效果,你们的实现方式有问题。
    正确的方式,背景图片放 body 或者一个大 div 里。
    登录框设置半透明背景,再调一下圆角会更好看。
    .login-box{
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    }
    jeblur
        20
    jeblur  
    OP
       2020-05-15 13:07:32 +08:00
    @qiayue 这其实是系统中自带的 css,可能也是调用的什么模板把,毕竟不是专业做这块的
    CDL
        21
    CDL  
       2020-05-15 13:11:28 +08:00
    关键字:垂直居中
    imzhaotao
        22
    imzhaotao  
       2020-05-15 15:16:03 +08:00
    登录宽设置宽高,然后定位到屏幕中间就可以了
    violetlai
        23
    violetlai  
       2020-05-15 16:11:38 +08:00
    定位 然后改改 div 大小
    overflow99
        24
    overflow99  
       2020-05-15 19:20:06 +08:00
    脱离标准流
    定位
    background-attachment:fixed;
    overflow99
        25
    overflow99  
       2020-05-15 19:21:30 +08:00
    background-color: transparent;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3914 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:19 · PVG 18:19 · LAX 02:19 · JFK 05:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.