国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

你的這個圖切的就有問題,咋能一個大背景切成一張圖, 正確的作法是把那個框切成一個圖, 當p的背景, img是他的子元素, width是100% , 這樣不管怎麼變都不會有問題

我也覺得你這個切圖有問題，勉強實現(xiàn)了你的要求，但不是長久之計。

HTML

<p class="flex-box">
    <img class="bgCover" src="http://www.1ymlh.com/img/dpm/avatar_border1.png">
    <img class="avatar" src="http://www.1ymlh.com/img/132.png">
</p>

CSS

.flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.bgCover {
    position: relative;
    left: 2px;
    top: 4px;
}

.avatar {    
    width: 284px;        
    position: absolute;
}

Jsfiddle 查看

注意圖中箭頭所指：

你的樣式設(shè)定中：backgorund-size:contain，然后我試著放大縮小了，結(jié)果，圖片本身并沒有發(fā)生多大的變化，就是不能同步縮放。我也不懂 contain 這個屬性是啥意思...，自己百度吧。。。把這個設(shè)置成 background-size:auto 就好了。

還有一個就是，你的背景圖片的位置是設(shè)定成 center center ，即水平，垂直居中。所以你的圖片也要設(shè)置成水平，垂直居中。關(guān)于如何水平垂直居中的，這個你只能百度，google。。了，我這邊提供的是 css3 的居中方法。

position:absolute;
left:50%;
top:50%;
transform:translate3d(-50% , -50% , 0px);

表示，設(shè)定圖片水平，垂直居中。

我這邊測試的效果是 ok 了，你可以試試看...。

將圖片設(shè)定為框的背景圖片 刪除img標籤 設(shè)定background-size:cover