父元素:

.banner {
    background-image: url(../images/header_desktop.png);
    background-color:black;
    background-repeat: no-repeat;
    background-position: center center;
    height: 420px;
    /* 父元素加入 */
    position: relative;
}


子元素:

.banner_box {
    width: 400px;
    height:150px;
    background-color: rgba(0, 0, 0, 0.3);
    text-align:center;
    color:#fff;
    /* 子元素加入 */
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
文章標籤
創作者介紹
創作者 READY sharing 的頭像
READY sharing

Ready sharing

READY sharing 發表在 痞客邦 留言(0) 人氣()