我有一个问题,我正在做一个图片库,但我正在使用的课程正在制作一个像这样的奇怪背景
我甚至不把颜色放在CSS代码中
这是html代码:
.boxWork {
position: relative;
margin-top: 2em;
margin-bottom: 2em;
background: url(../images/carousel/white.jpg);
}
.boxWork:after {
/*content: '';*/
display: block;
position: absolute;
top: -9em;
left: 50%;
height: 9em;
background-color:white !important;
/*border-left: solid 1px #fff;*/
}
.boxWork:before {
/*content: '';*/
background-color:white !important;
display: block;
width: 90px;
height: 66px;
position: absolute;
left: 50%;
top: -4.5em;
margin-left: -45px;
margin-top: -33px;
/*background: url("images/arrow.svg") no-repeat;*/
}
.boxWork :last-child {
margin-bottom: 0;
}
.boxWork.style2 {
text-align: center;
}
.boxWork.style2 header {
display: inline-block;
padding: 2em 3em 2em 3em;
margin: 0;
}
.boxWork.style2 header p {
padding: 0;
}
.boxWork.style2 .inner {
position: relative;
padding: 40px 0 0px 0;
}
.boxWork.style2 .inner:after {
/*content: '';*/
display: block;
position: absolute;
top: 0;
left: 50%;
height: 100%;
/*border-left: solid 1px #ffffff;*/
}
.boxWork.style2 .inner .row {
position: relative;
}
.boxWork.style2 .inner .row:before {
/*content: '';*/
display: block;
position: absolute;
top: 50%;
left: 20px;
width: calc(100% - 40px);
/*border-bottom: solid 1px #ffffff;*/
}
.boxWork.style2 .inner .image {
position: relative;
z-index: 1;
padding: 20px;
}
这是HTML
<article class="container boxWork style2">
<header>
<h2>Marcas que han confiado en nosotros</h2>
<p>Más de 15 años nos respaldan.</p>
</header>
<div class="inner gallery">
<div class="row 0%">
<div class="3u 12u(mobile)">
<a href="images/fulls/01.jpg" class="image fit"><img src="images/thumbs/01.jpg" alt="" title="Ad infinitum" /></a>
</div>
<div class="3u 12u(mobile)">
<a href="images/fulls/02.jpg" class="image fit"><img src="images/thumbs/02.jpg" alt="" title="Dressed in Clarity" /></a>
</div>