background

by redky

HTML

<div class="box"></div>

CSS

* { margin: 0; padding: 0;}
.box {
    height: 200px;
    width: 600px;
    margin: 100px;
    
    border: 50px solid transparent;
    border: 50px solid rgba( 255, 255, 255, 0.6 );
    
    padding: 50px;
    background-color: #eee;
    background-repeat: space;
    /* 重复 image 以适应整个这容器, 但不对 image 做处理 */
    /* 容器不能放下两个 image 时, 仅放一个 */
    /* 容器放2个后, 还有剩余空间时, 空间留中间 */
    /* background-repeat: round; */
    /* 会缩放 image, 来适应容器 */
    
    
    /*background-repeat: repeat-y;*/
    /*background-repeat: repeat-x;*/
    /*background-repeat: repeat;*/
    /*background-repeat: no-repeat;*/
    
    background-image: -webkit-linear-gradient( top, #ffa, #faa );
    /* background-image: url(https://www.google.com.hk/images/srpr/logo11w.png); */
    
    background-origin: border-box;
    /* default: padding-box; */
    /* 在使用 padding-box(default) 时, 上例 gradient 会在 border 上使用实体颜色 */
    /* border-box; */
    /* content-box */
    
    /* background-clip: padding-box; */
    /* 从 border-box 开始, 但从 padding-box 显示 */
    
    /*background-size: 50px 50px;*/
    /*background-size: 100% 100%;*/
    /* 对图片做相应缩放 */
    
    /*background-size: cover;*/
    /* resize 图片, 让最小尺寸方向(width/height)覆盖容器 */
    
    /*background-size: contain;*/
    /* resize 图片, 让图片覆盖容器, 并且图片正好全部显示 */
}