Question

尝试边界：无;无济于事。

#header .bg
{
float: right;
max-width: 100%;
max-height: 100%;
border: none;
}

现在为html ...

<body>
<div id="header">
<img class="bg" src="http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-    Beach-Landscape-HD.png"> 
</div>

Answer 1

你为什么不用：

<div id="header" style="background-size:cover; background-image:url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);">

代替？或者，甚至更好：

<div id="header"></div>

CSS：

#header {
    background-size: cover;
    background-image: url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);
}

Answer 2

示例，但body标记中包含图片：Live version

HTML：

<body>
   <div id="header">
   </div>
</body>

CSS：

body
{
  background-image: url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);
  background-repeat: no-repeat;
  background-position: top left
}

Answer 3

img代码是已替换的元素，这意味着默认情况下display设置为inline，这也意味着line-height价值影响它，这可能就是为什么你周围有负空间。

解决方案：在display: block;上添加img媒体资源。

同样在您的特定情况下，如果您没有使用它，则应使用CSS Normalize - 这将消除由任何其他元素（即身体）引起的任何额外间距。

从图像中删除白色边框

3 个答案: