圍繞CSS背景圖像的邊框

我想圍繞CSS背景圖像繪製邊框，該背景圖像根據容器div中的窗口大小調整自身大小。我可以在div周圍繪製邊框，但不能圍繞圖像本身繪製邊框。圍繞CSS背景圖像的邊框

這甚至可以在這種設置？

比郵編這裏更確切地說，我已經提前做了工作示例HERE

<style parse-style>#pimg { 
background:#FFF url({{ img }}) center center no-repeat; 
background-size: contain; 
    height: 100%; 
    position:relative; 
    -webkit-transition: All 0.3s ease-in-out;;} 
</style>

感謝。

來源

2017-01-20 angularchobo

我會考慮添加一個div來包含你的背景圖像，然後將這個div的邊框。 – Vincent

你的意思是[this]（https://codepen.io/anon/pen/ZLexgG）？ – Chris

不，克里斯，我可以做到這一點，但我希望邊界只在圖像周圍，而不是整個div。 – angularchobo

不，沒有辦法做到這一點。您可以添加包含圖像的第二個div，但是您將無法使用background-size：contains。

如果你知道圖像尺寸不會改變，你可以添加第二個背景圖像，以相同的方式定位，這只是一個透明PNG與你想要的邊界...但這將是真正的愚蠢。

來源

2017-01-20 13:28:34 shipshape

謝謝，是的，我需要背景大小：包含和圖像總是有相同的比例。我想到了這些方面的一些事情，但認爲這很愚蠢，可能會導致路上的併發症。 – angularchobo

如果您願意更改標記，您可以簡單地將圖像作爲img標記，並使用max-width和max-height來處理調整大小。 – shipshape

不幸的是，我沒有馬上創建一個工作示例的時間，但一個可能的解決方法是使用多背景的：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

第二個背景可能是一個SVG矩形中風。爲避免由於縮放造成可能的行程變形，請使用非縮放行程：https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

來源

2017-01-20 13:36:43

正如shiphape所說，沒有辦法爲BG圖像繪製邊框，但我有一個可能對您有幫助的想法。您可以使用2個背景圖像，後面的圖像可以是背景邊框的彩色背景。請參閱下面的代碼：

#pimg { 
    border: 1px solid black; 
    width: 200px; 
    height: 200px; 
    background-image: url({{ bg-image.jpg }}), url({{ 1px.jpg }}); 
    background-size: 90% 90%, 100% 100%; 
    background-repeat: no-repeat, repeat; 
    background-position: center center, left top; 
}

使用1x1px墊片圖像作爲邊框並重復它所需的顏色。背景大小可以控制邊框的寬度。如果你增加90％，邊界會變薄，如果你減少邊界，邊界會變寬。

來源

2017-01-20 14:47:10

圍繞CSS背景圖像的邊框

回答

相關問題