CSS3挑战 - 如何获得这个渐变背景模式，而不使用所有的div？ [英] CSS3 Challenge - How to get this gradient background pattern without using all the divs?

问题描述

我想知道，如果一些CSS大师可以给我一些想法如何构建这个背景模式，而不使用这里使用的div标签 - http://codepen.io/juanbrujo/pen/IrAfF

I am wondering if some CSS guru can give me some idea of how to build this background pattern without using the div tags as used here - http://codepen.io/juanbrujo/pen/IrAfF

推荐答案

css

.back {
    position: absolute;
    width: 99%;
    height: 99%;
    background: linear-gradient(180deg, #6e529d 0%, #d97b93 100%);
    overflow: hidden;
}

.back:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    top: 0px;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: top left;
    background-image: linear-gradient(44.9deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
                      linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
                      linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 25%, transparent 25%),
                      linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 25.391%, transparent 25%);
    background-size: 20em 20em;
    background-position: 0em 0em, 10em 10em, 10em 10em, 0em 0em;

}

fiddle

另一种方法，无需使用绝对定位

Another approach, without need to use absolute positioning

body, html {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    overflow: hidden;
}

body:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    top: 0px; 
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: center;
    background-image: linear-gradient(44.9deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
                      linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
                      linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 25%, transparent 25%),
                      linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 25.391%, transparent 25%);
    background-size: 20em 20em;
    background-position: 0em 0em, 10em 10em, 10em 10em, 0em 0em;

}

body:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #6e529d 0%, #d97b93 100%);
}

使用100％尺寸:-)

And using 100% dimensions :-)

demo2

这篇关于CSS3挑战 - 如何获得这个渐变背景模式，而不使用所有的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！