带有背景图片的页面顶部和左侧的边框

我正在将一个非常基本的网站作为我大学课程的一部分。我已经放入了背景图片，并且它几乎完全吻合 - 但由于某种原因，我在图片顶部有一个白色边缘（约一英寸厚），左边有一个白色边缘（大约半英寸）。带有背景图片的页面顶部和左侧的边框

这里是我的形象CSS：

#image { 

    width: 100% 100%; 
    position: fixed; 
    z-index: -9; 
    opacity: 0.8; 
    display: block; 
    background-size: cover; 
}

我已经把背景图像中的HTML只是口主体标签之后，因为这：

<img id="image" src="CourseworkImages/background2.jpg" alt="Background Image">

我不知道为什么我有页面上的这些边距和他们破坏了页面的外观 - 任何帮助都非常感谢！

感谢

来源

2017-04-13 Conor

嘿！欢迎来到Stack Overflow。你的问题可以使用更多的代码来帮助我们。请阅读这里了解如何创建[MCVE]。 – amflare

是否有你使用'img'而不是使用CSS的原因？像'body {background-image：url（'/path/to/image.jpg'）;'。 – hungerstar

'html，body {padding：0，margin：0}' – sol

而不是使用img标签像你这样我会使用CSS建议。例如：

body { 
    background-image: url('/path/to/image.jpg'); 
}

您可以摆脱很多您使用此方法使用的属性。你可能想保留的那个是background-size。

正如其他人所指出的那样，大多数浏览器增加保证金的8px导向创建多余空白区域的body元素。要删除它，请将margin: 0;添加到上面的CSS选择器中。

为了保持不透明度，我会在身体上使用伪元素。您也可以创建一个具有所需的不透明度的PNG。使用CSS更灵活一些。

body { 
 
    position: relative; 
 
    margin: 0; 
 
    min-height: 100vh; 
 
    background-color: hotpink; 
 
} 
 

 
body:before { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    opacity: 0.6; 
 
    background-image: url('http://placekitten.com/1600/1600'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

来源

2017-04-13 14:14:32 hungerstar

这工作 - 非常感谢。快速跟进问题;我现在该如何改变背景图片的属性？我想改变不透明度，但不知道如何做到这一点，现在它全部在CSS中... – Conor

您可以使用PNG内置的不透明度创建图像，也可以使用类似于您开始使用但使用伪元素。我会在几分钟后更新。 – hungerstar

优秀，谢谢！ – Conor

-1

非常基本的例子：

body { 
    margin: 0; 
    padding: 0; 
    border: 1px solid yellow; 
    border-right-style: none; 
    border-bottom-style: none; 
    width: 100%; 
    opacity: 0.8; 
    display: block; 
    background-size: cover; 
    background-image: url("CourseworkImages/background2.jpg"); 
}

你也可以用一个包装DIV做到这一点。您可能还需要玩background-position和repeat属性。而且您还需要重置浏览器的默认边距和填充以便在它们之间确实没有空间。正如我所说的，基本的例子。如果你对这个主题感兴趣，你可以看看CSS框架，它重置所有浏览器预定义的样式， G。 normalize.css

来源

2017-04-13 14:29:32 alpham8

将'opacity'添加到'body'将导致所有后代元素共享该不透明度，[JSFiddle]（https://jsfiddle.net/1mbjdvr0/）。更不用说不影响背景图片的不透明度了。 – hungerstar

好吧，我只是复制提问者的每个属性。但是，这个答案应该解决这个问题。 – alpham8

盲目复制属性并不能解决**的问题。在[**你的解决方案**]（https://jsfiddle.net/1mbjdvr0/1/）中'body'的所有内容都有不透明的应用（不好），背景图像没有像你那样的不透明/透明通过图像看不到任何黄色背景（不是OP想要的）。 – hungerstar

带有背景图片的页面顶部和左侧的边框

回答

相关问题