如何刪除圖像周圍

我試圖刪除解決此圖像自動生成的容器保證金自動生成的HTML容器保證金。以下是我用來製作它的代碼。您可以查看網站here。我試圖添加一個margin and padding item to the body element，但它沒有解決問題。如何刪除圖像周圍

.container { 
 
    position: relative; 
 
    width: 240px; 
 
    height: 240px; 
 
} 
 

 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    transition: .5s ease; 
 
    background-color: #008CBA; 
 
} 
 

 
.container:hover .overlay { 
 
    opacity: 0.85; 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <img src="./img/headshots/Exec_DMoon.jpg" width="240" height="240" alt="Photo of David Moon, Assistant Vice President for Financial Affairs" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text"><b>David Moon</b> Assistant Vice President for Financial Affairs, <a class="usa-external_link" target="_blank" href="mailto:[email protected]">Email</a></div> 
 
    </div> 
 
</div>

這是所需的輸出：

我在做什麼錯？

來源

2017-06-29 jamesharnett

我缺少的東西？您鏈接的網站看起來像「所需的輸出」。另外您網站上的代碼不符合您的代碼 – j08691

給[flexboxes（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes）一展身手的截圖，將節省你有些頭疼。 – Amous

@ j08691對不起，我只是同步我的代碼到GitHub的頁面，現在它顯示爲我描述。 – jamesharnett

從約翰內斯答案几乎工作，但它造成的問題，其中的文字會將自己重新定位到開放空白位置（請參閱下圖），而不是在所有圖像下進行格式設置。

將溶液在.container使用display: inline-block;，如阿德里安建議。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.container { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 50%; 
 
    display: inline-block; 
 
} 
 

 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    transition: .5s ease; 
 
    background-color: #008CBA; 
 
} 
 

 
.container:hover .overlay { 
 
    opacity: 0.8; 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: 25px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Fade in Overlay</h2> 
 
<p>Hover over the image to see the effect.</p> 
 

 
<div class="container"> 
 
    <img src="img_avatar.png" alt="Avatar" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text">Hello World</div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="img_avatar.png" alt="Avatar" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text">Hello World</div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="img_avatar.png" alt="Avatar" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text">Hello World</div> 
 
    </div> 
 
</div> 
 

 
<h2>Fade in Overlay</h2> 
 
<p>Hover over the image to see the effect.</p> 
 

 
</body> 
 
</html>

來源

2017-07-02 03:43:14 jamesharnett

這是最簡單的修復方法，imo：將您想要的物品包裝在一個格子中的網格中並給出分區display: flex和flex-wrap: wrap。祝你好運！

來源

2017-06-29 19:59:30 k88lawrence

，只需添加float: left到.container

（達到大家展示一下下「這是所需的輸出」）

來源

2017-06-29 20:19:18 Johannes

雖然浮點運算會導致其他問題，但需要進行緩解。 'display：inline-block'通常更易於使用，並且不需要明確的修復。 – Adrian

在這種特殊情況下（當您將它添加到原始頁面時）float完美地工作。 – Johannes

如何刪除圖像周圍

回答

相關問題