創建邊框縫隙

我試圖讓一個div的邊界內建立以適應圖像的差距，與此類似：創建邊框縫隙

enter image description here

有沒有辦法在純CSS來做到這一點？所有我能看到的是：

.box { 
    background: url(img.png) bottom left; 
    border-top: 1px solid #eee; 
    border-left: 1px solid #eee; 
}

但我的問題是border-right: 1px solid #eee;創建於我的形象，這是不希望的，當然上面的線。

它需要有響應。這個圖像是一個例子，但是你得到了一般想法。

來源

2013-11-20 davewoodhall

這就是OP想要什麼，我認爲。可以通過在圖像上應用絕對定位來實現 – Huangism

我明白了，但是，這並不能爲響應式工作留出足夠空間。所顯示的圖片很簡單，但這也適用於內容更多的div。 – davewoodhall

看到我的答案，這給你的一般想法。我不知道你的情況到底是什麼，所以一旦你明白了，你可以正確地處理圖像的位置 – Huangism

像這樣的東西？

http://jsfiddle.net/6Ufb5/

div { 
    border: 1px solid #ccc; 
    position: relative; 
} 
img { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
}

給容器位置相對和絕對的IMG，它左移10px的和10px的從上轉移下來，你有你的願望。對於響應部分，這只是給容器和/或img％寬度。像這樣：

http://jsfiddle.net/6Ufb5/2/

來源

2013-11-20 21:43:08 Huangism

您可以通過使用圖像元素的絕對定位實現這一點 - 它是在一個<img>元素，而不是爲背景圖像，因爲它永遠不會重疊父邊界（或者即使它通過調整background-position屬性，邊框會趴在背景圖像的頂部...這是預期的行爲，順便

<div class="box"> 
    Content goes here 
    <img src="http://placehold.it/300x200" /> 
</div>

而CSS：

.box { 
    position: relative; 
    border: 1px solid #333; 
} 
.box img { 
    position: absolute; 
    bottom: -1px; 
    right: -1px; 
}

如果你想有一個動態和/或響應的解決方案，你可能不得不求助於JS這樣做 - 比如調整圖像大小，根據包裝盒上的尺寸，並指派一個高度箱子拿考慮到圖像高度（因爲圖像是絕對定位的，所以它被從文檔流中取出）。

見小提琴這裏：http://jsfiddle.net/teddyrised/xH6UV/

來源

2013-11-20 21:46:21 Terry

這可能會實現，如果你可以改變你的標記。對於可訪問性，我認爲圖像應該是圖像而不是背景，並且這種方法是有反應的（儘管您可能希望通過媒體查詢改變小尺寸的邊距）。

http://jsfiddle.net/isherwood/79Js5

.box { 
    border: 1px solid #ccc; 
    display: inline-block; 
    padding: 10px 0 10px 10px; 
    width: 40%; 
} 
.box img { 
    margin-right: -10%; 
    margin-bottom: -10%; 
    width: 105%; 
} 

<div class="box"> 
    <img src="http://placehold.it/200x100/f3f3f3" /> 
</div>

來源

2013-11-20 21:47:13 isherwood

從我所看到的，沒有添加圖像到HTML這樣做真的沒有辦法... – davewoodhall

的確如此，但正如我所說的，可訪問性驗證器會希望它成爲一個圖像。 – isherwood

看起來像這將不得不做。然而，我會等待有人提出一種替代方法。 – davewoodhall

創建邊框縫隙

回答

相關問題