jgMYGz

index.html

<div class="layout" id="layout">
  <div class="section clearfix">
    <h4 id="background-color">
      <a href="#background-color" class="headerlink" title="background-color"></a>
      background-color:
    </h4>
    <div class="right item">
      <div class="demo tran"></div>
      <div class="title">transparent</div>
    </div>
    <div class="left item">
      <div class="demo yellow"></div>
      <div class="title">#dedd6f</div>
    </div>
    <div class="middle item">
      <div class="demo gray"></div>
      <div class="title">gray</div>
    </div>
  </div>
  <div class="section clearfix">
    <h4 id="background-image">
      <a href="#background-image" class="headerlink" title="background-image"></a>
      background-image:
    </h4>
    <div class="right item">
      <div class="demo muliple"></div>
      <div class="title">muliple</div>
    </div>
    <div class="left item">
      <div class="demo url"></div>
      <div class="title">url(...)</div>
    </div>
    <div class="middle item">
      <div class="demo none"></div>
      <div class="title">none</div>
    </div>
  </div>
  <div class="section float-item repeat-demo">
    <h4 id="background-repeat">
      <a href="#background-repeat" class="headerlink" title="background-repeat"></a>
      background-repeat:
    </h4>
    <div class=" clearfix">
      <div class="item">
        <div class="demo repeat-x"></div>
        <div class="title">repeat-x</div>
      </div>
      <div class="item">
        <div class="demo repeat-y"></div>
        <div class="title">repeat-y</div>
      </div>
      <div class="item">
        <div class="demo repeat"></div>
        <div class="title">repeat</div>
      </div>
      <div class="item">
        <div class="demo no-repeat"></div>
        <div class="title">no-repeat</div>
      </div>
    </div>
    <div class="clearfix">
      <div class="item">
        <div class="demo round"></div>
        <div class="title">round</div>
      </div>
      <div class="item">
        <div class="demo space"></div>
        <div class="title">space</div>
      </div>
      <div class="item">
        <div class="demo round-space"></div>
        <div class="title">round space</div>
      </div>
      <div class="item">
        <div class="demo space-round"></div>
        <div class="title">space round</div>
      </div>
    </div>
  </div>
  <div class="section float-item size-demo">
    <h4 id="background-size">
      <a href="#background-size" class="headerlink" title="background-size"></a>
      background-size:
    </h4>
    <div class="clearfix">
      <div class="item">
        <div class="demo contain"></div>
        <div class="title">contain</div>
      </div>
      <div class="item">
        <div class="demo cover"></div>
        <div class="title">cover</div>
      </div>
      <div class="item">
        <div class="demo w100"></div>
        <div class="title">100px</div>
      </div>
      <div class="item">
        <div class="demo rate5080"></div>
        <div class="title">50% 80%</div>
      </div>
    </div>
  </div>
  <div class="section float-item position-demo">
    <h4 id="background-position">
      <a href="#background-position" class="headerlink" title="background-position"></a>
      background-position:
    </h4>
    <div class="clearfix">
      <div class="item">
        <div class="demo top"></div>
        <div class="title">top</div>
      </div>
      <div class="item">
        <div class="demo bottom-right"></div>
        <div class="title">bottom right</div>
      </div>
      <div class="item">
        <div class="demo w20h40"></div>
        <div class="title">20px 40px</div>
      </div>
      <div class="item">
        <div class="demo p20"></div>
        <div class="title">30%</div>
      </div>
    </div>
  </div>
  <div class="section attachment-demo">
    <h4 id="background-attachment">
      <a href="#background-attachment" class="headerlink" title="background-attachment"></a>
      background-attachment:
    </h4>
    <div class="clearfix">
      <div class="item right">
        <div class="demo local">hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br></div>
        <div class="title">local</div>
      </div>
      <div class="item left">
        <div class="demo fixed">hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br></div>
        <div class="title">fixed</div>
      </div>
      <div class="item middle">
        <div class="demo scroll">hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br>hello world!<br></div>
        <div class="title">scroll</div>
      </div>
    </div>
  </div>
  <div class="section origin-demo">
    <h4 id="background-origin">
      <a href="#background-origin" class="headerlink" title="background-origin"></a>
      background-origin:
    </h4>
    <div class="clearfix">
      <div class="item right">
        <div class="demo border"></div>
        <div class="title">border-box</div>
      </div>
      <div class="item left">
        <div class="demo content"></div>
        <div class="title">content-box</div>
      </div>
      <div class="item middle">
        <div class="demo padding"></div>
        <div class="title">padding-box</div>
      </div>
    </div>
  </div>
  <div class="section clip-demo">
    <h4 id="background-clip">
      <a href="#background-clip" class="headerlink" title="background-clip"></a>
      background-clip:
    </h4>
    <div class="clearfix">
      <div class="item right">
        <div class="demo border"></div>
        <div class="title">border-box</div>
      </div>
      <div class="item left">
        <div class="demo content"></div>
        <div class="title">content-box</div>
      </div>
      <div class="item middle">
        <div class="demo padding"></div>
        <div class="title">padding-box</div>
      </div>
    </div>
  </div>
</div>

jgmygz.markdown

jgMYGz

A Pen by typeR on CodePen.

License.

script.js

《

style.css

.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  width: 100%;
  height: 0;
  clear: both;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.left {
  float: left;
}
.right {
  float: right;
}
.layout {
  color: #666;
  margin: 0 auto;
}
.section {
  margin: 25px 0;
  width: 700px;
}
.section h4 {
  margin: 15px 0;
  color: #4e4a4a;
  position: relative;
}
.section h4:before {
  content: "#";
  display: block;
  color: #41b883;
  position: absolute;
  font-size: 20px;
  line-height: 22px;
  left: -18px;
  top: 0;
}

.item {
  width: 150px;
}
.demo {
  border: 1px dotted #ddd;
  width: 150px;
  height: 150px;
}
.title {
  color: #666;
  text-align: center;
  padding: 10px 0;
}
.gray {
  background-color: gray;
}
.yellow {
  background-color: #dedd6f;
}
.tran {
  background-color: transparent;
}
.left {
  float: left;
}
.middle {
  margin: 0 auto;
}
.right {
  float: right;
}
.url {
  background-image: url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/201703/background_05.png);
}
.none {
  background-image: none;
}
.muliple {
  background-image: url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/201703/background_05.png),
    url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/201703/background_05.png);
  background-repeat: no-repeat;
  background-size: 81%;
}
.float-item {
  width: 600px;
}
.float-item .item {
  float: left;
}
.repeat-demo .demo {
  width: 140px;
  height: 140px;
  background-image: url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/201703/background_05.png);
  background-size: 40%;
}
.repeat-x {
  background-repeat: repeat-x;
}
.repeat-y {
  background-repeat: repeat-y;
}
.repeat {
  background-repeat: repeat;
}
.no-repeat {
  background-repeat: no-repeat;
}
.round {
  background-repeat: round;
}
.space {
  background-repeat: space;
}
.round-space {
  background-repeat: round space;
}
.space-round {
  background-repeat: space round;
}
.size-demo .demo {
  width: 140px;
  height: 160px;
  background-image: url(../images/penguin.png);
  background-repeat: no-repeat;
}
.contain {
  background-size: contain;
}
.cover {
  background-size: cover;
}
.size-demo .w100 {
  background-size: 100px;
  background-image: url(../images/cow.png);
}
.rate5080 {
  background-size: 50% 80%;
}
.position-demo .demo {
  width: 140px;
  height: 140px;
  background-image: url(../images/penguin.png);
  background-repeat: no-repeat;
  background-size: 50%;
}
.position-demo .top {
  background-position: top;
}
.position-demo .bottom-right {
  background-position: bottom right;
}
.position-demo .w20h40 {
  background-position: 20px 40px;
}
.position-demo .p20 {
  background-position: 20%;
}
.attachment-demo .demo {
  background-image: url(../images/penguin.png);
  background-repeat: no-repeat;
  background-size: 50%;
  line-height: 50px;
  overflow: auto;
}
.attachment-demo .fixed {
  background-attachment: fixed;
  background-position: bottom;
}
.attachment-demo .scroll {
  background-attachment: scroll;
}
.attachment-demo .local {
  background-attachment: local;
}
.origin-demo .demo {
  background-image: url(../images/penguin.png);
  background-repeat: no-repeat;
  background-color: #66a767;
  border-width: 10px;
  padding: 10px;
  width: 120px;
  height: 120px;
  background-size: 70%;
}
.origin-demo .content {
  background-origin: content-box;
}
.origin-demo .padding {
  background-origin: padding-box;
}
.origin-demo .border {
  background-origin: border-box;
}
.clip-demo .demo {
  background-image: url(../images/penguin.png);
  background-repeat: no-repeat;
  background-color: #66a767;
  border-width: 10px;
  padding: 10px;
  width: 120px;
  height: 120px;
  background-size: 70%;
}
.clip-demo .content {
  background-clip: content-box;
}
.clip-demo .padding {
  background-clip: padding-box;
}
.clip-demo .border {
  background-clip: border-box;
}