请教一个前端问题。。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1653 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

CSS

Homepage

切开

背景

25 条回复 • 2020-05-15 19:21:30 +08:00

cjc2017

2020-05-15 11:09:14 +08:00

中间登录框白色的背景改下透明度

wildnode

2020-05-15 11:18:42 +08:00

这背景是左右各一张么？

murmur

2020-05-15 11:19:21 +08:00

background 用 transparent 就可以，或者 rgba 可以调出叠加淡淡的灰度

hahahahaha234

2020-05-15 11:25:27 +08:00

opacity

jeblur

2020-05-15 11:26:09 +08:00

@wildnode 是一整张

murmur

2020-05-15 11:30:00 +08:00

@hahahahaha234 opacity 的透明度影响里面的元素，rgba 叠加才不影响

jeblur

2020-05-15 11:36:32 +08:00

问下各位大佬，CSS 里面的 color 的颜色是什么意思

murmur

2020-05-15 11:38:49 +08:00

@jeblur 文字颜色，这种应该去查手册，不需要问啊

stuartTin

2020-05-15 11:43:45 +08:00

@wildnode 老哥咱俩头像挺有缘啊

ccyu220

2020-05-15 11:46:17 +08:00

这种其实你放个线上演示地址更好解决。如果只看图的话，不好表述。

jeblur

2020-05-15 11:48:41 +08:00

@murmur 在.ui-body-a, .ui-overlay-a {}标签下增加了 background: transparent 都没有效果，不知道哪里错了。
以我的理解打开页面之后 F12 点选背景可以看到标签，但不知道这个标签是否跟 CSS 文件相关联

zhyl

2020-05-15 11:48:55 +08:00 via Android

把红线框出来的地方去掉就不觉得是左右两张图了🐶

jeblur

2020-05-15 11:49:59 +08:00

@ccyu220 公司的 portal 地址，放出来怕被攻击。。不过这样确实可能不好根本解决问题

IGJacklove

2020-05-15 11:53:39 +08:00

给个绝对定位呗,谁没事会来攻击你这种网站...

otakustay

2020-05-15 11:54:43 +08:00

登录框只有中间一小块（不包括红框部分），绝对定位或者 flex 啥的办法怼到正中央就行了，再给背景加点透明

GzhiYi

2020-05-15 11:56:14 +08:00

position: absolute;
left: 0;
right: 0;
margin: auto;

jeblur

2020-05-15 12:09:50 +08:00 via Android

@zhyl 关键问题是这个是系统自带的不知道去掉会不会有问题，而且暂时还没定位到这个部分在 css 文件中的位置

wildnode

2020-05-15 12:32:38 +08:00 via iPhone

@stuartTin 哈哈哈哈你会杂技

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

2020-05-15 13:07:32 +08:00

@qiayue 这其实是系统中自带的 css，可能也是调用的什么模板把，毕竟不是专业做这块的

CDL

2020-05-15 13:11:28 +08:00

关键字：垂直居中

imzhaotao

2020-05-15 15:16:03 +08:00

登录宽设置宽高，然后定位到屏幕中间就可以了

violetlai

2020-05-15 16:11:38 +08:00

定位然后改改 div 大小

overflow99

2020-05-15 19:20:06 +08:00

脱离标准流
定位
background-attachment:fixed;

overflow99

2020-05-15 19:21:30 +08:00

background-color: transparent;