我尝试在css中创建一个类似于跟随图像的视图,但之前没有使用过有用的结果。
我的CSS代码:
.geo-login-left{
background-color: #7199bd;
background-image: url(../img/home-bg.png);
background-repeat: no-repeat;
background-size: cover;
display: block;
background-position: center;
text-align: center;
}
.geo-login-left:before{
background-image: url(../images/logo-white.jpg);
margin-top: 5px;
content : "";
opacity: 0.3;
}
.geo-login-left:after{
background-image: url(../images/logo-white.jpg);
content : "";
}
答案 0 :(得分:1)
没有图像的人会像:
body {
background-color: #0074D9;
}
.box {
background-color: white;
border-radius: 10px;
margin: 3em auto;
padding: 2em;
position: relative;
width: 24em;
}
.box:before, .box:after {
background: inherit;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
content: "";
display: block;
left: 50%;
opacity: 0.5;
position: absolute;
transform: translateX(-50%);
width: 100%;
}
.box:before {
height: 1em;
top: -1em;
width: calc(100% - 2em);
}
.box:after {
height: 2em;
top: -2em;
width: calc(100% - 4em);
}
<div class="box">
Block
</div>