Css图象画廊有背景

时间:2015-11-04 02:50:54

标签: html css web

我有一个问题,我正在做一个图片库,但我正在使用的课程正在制作一个像这样的奇怪背景

enter image description here

我甚至不把颜色放在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>

0 个答案:

没有答案