如何使此圖像成爲邊框？

Question

我做了一個彈出框，我有一個自定義的邊框，但我很難弄清楚如何正確地將它插入到代碼中。

這裏是框輸入驗證碼：

.popup_block{ 
display: none; /*--hidden by default--*/ 
background: #ffffff; 
float: left; 
font-size: 1.2em; 
position: fixed; 
top: 50%; left: 50%; 
z-index: 99999; 
/*--CSS3 Box Shadows--*/ 
-webkit-box-shadow: 0px 0px 10px #000; 
-moz-box-shadow: 0px 0px 10px #000; 
box-shadow: 0px 0px 10px #000; 
/*--CSS3 Rounded Corners--*/ 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
} 
img.btn_close { 
float: right; 
margin: -5px -5px 0 0; 
} 
/*--Making IE6 Understand Fixed Positioning--*/ 
*html #fade { 
position: absolute; 
} 
*html .popup_block { 
position: absolute; 
}` 

<div id="02" class="popup_block"> 

<Center> text goes here 
</center></div> 

這裏是邊境： 有沒有辦法，我把它放在彈出框或東西的頂部？裏面是透明的，所以把它放在高位就行了，我想。除非有更簡單的方法。

Answer 1

您還可以使用邊界圖像，並最終定位從包裝固定。

#poplayer { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* might be usefull too 
 
    z-index: XX; 
 
    overflow:auto; 
 
    */ 
 
} 
 
#popup { 
 
    min-width: 450px; 
 
    min-height: 150px; 
 
    border-style: solid; 
 
    border-width: 47px 34px 32px 39px; 
 
    -moz-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
 
    -webkit-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
 
    -o-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
 
    border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 fill repeat; 
 
}

<div id="poplayer"> 
 
    <div id="popup"> 
 
    whatever comes inside your popup 
 
    </div> 
 
</div>

Answer 2

我建議你包裹彈出框在div標籤，並把您的自定義邊框爲background-image父div。

確保你的父母div具有體積小，全能padding，它是有點大，使彈出框落在右側的空白。

你還必須position: absolute你彈出父內框，並使用類似下面的CSS代碼的東西：

.popup_block { 
    /* Positioning */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -40%); 
    /* Other styling properties */ 
} 

在上面的代碼中，我使用-40%代替-50%，因爲你實際上必須將它定位爲比y軸上的確切中心低一點。你可能需要四處遊玩並試驗確切的數字。

你的HTML應該是：

<div class="popup_block-wrapper"> <!-- the parent --> 
    <div id="02" class="popup_block"> 
     <center>text goes here</center> 
    </div> 
</div> 

父的CSS：

.popup_block-wrapper { 
    /* Positioning */ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    /* Other styling properties */ 
}