先贴上代码
.css.scss文件内容:
overflow: hidden;
margin: 20px 0;
.slide-content {
width: 100%;
float: left;
position: relative;
.bg {
width: 360px;
height: 320px;
left: 50%;
margin-left: 160px;
top: 100px;
position: absolute;
border-radius: 20px;
background: #EFEFEF;
opacity: 0.3;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); //兼容 IE7-8
}
.content {
left: 50%;
margin-left: 160px;
top: 100px;
position: absolute;
z-index: 999;
.sign-form {
width: 360px;
height: 320px;
overflow: hidden;
border-radius: 20px;
li {
margin: 0px 0px 40px 0px;
text-align: center;
line-height: 40px;
width: 179px;
height: 40px;
display: block;
color:#fff;
&.left-bottom-border {
border-left: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
&.right-bottom-border {
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
a{
color: #b3b3b3;
&:hover {
color: #ff3300;
}
}
}
}
.content {
left: 50%;
margin-left: 160px;
top: 100px;
position: absolute;
z-index: 999;
.sign-form {
width: 360px;
height: 320px;
overflow: hidden;
border-radius: 20px;
li {
margin: 0px 0px 40px 0px;
text-align: center;
line-height: 40px;
width: 179px;
height: 40px;
display: block;
color:#fff;
&.left-bottom-border {
border-left: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
&.right-bottom-border {
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
a{
color: #b3b3b3;
&:hover {
color: #ff3300;
}
}
}
.html.slim文件内容
.bg
.content
.sign-form
.cf
li.pull-left = '用户'
li.pull-right.left-bottom-border = '商家'
#js-alert-error
.form-content
= form_tag create_session_path, remote: true
= text_field_tag :account, nil, class: 'user'
= password_field_tag :password, nil, class: 'password'
= submit_tag '登入', data: { disable_with: '登入中...' }, class: "submit-btn"
span.pull-left = link_to '忘记密码'
span.pull-right = link_to '注册', user_sign_up_path
.bg
.content
.sign-form
.cf
li.pull-left = '用户'
li.pull-right.left-bottom-border = '商家'
#js-alert-error
.form-content
= form_tag create_session_path, remote: true
= text_field_tag :account, nil, class: 'user'
= password_field_tag :password, nil, class: 'password'
= submit_tag '登入', data: { disable_with: '登入中...' }, class: "submit-btn"
span.pull-left = link_to '忘记密码'
span.pull-right = link_to '注册', user_sign_up_path
.bg 和.content的宽高一样
.bg 是背景,颜色取 #EFEFEF 使用opacity: 0.3 的透明效果
.content 是登入框内容, 里面定义好输入框的样式
两者都相对于外层的 .slide-content 进行绝对位置和相对位置的设置。所以 .slide-content 的position:relative
.bg和 .content 的position:absolute
这样两者就是相对于外层的.slide-content包裹了。 在使用top ,right,left, 之类的属性进行定位,效果就会出来了。颜色使用#EFEFEF这种通用的颜色对轮播图会有很好的适应
使用这种方法的透明效果,使得登入框样式中的字体图片等不会有透明效果,就不会有朦胧模糊的感觉