css - 使用 HTML 和 CSS 溢出到正文中?

标签 css html background web

我想让我的一个 div 的背景图像溢出到正文部分。我试过 overflow:visible 没有任何运气。

查看图片:

wish it would overflow

看看 div 边缘的金色位是如何被切掉的?有什么建议吗?

这是我的设置:

在 HTML 中:

<body>
<div id="container">

在 CSS 中:

body{
    background-color: #0e0a04;
}

#container{
        max-width: 960px;
    margin: 0px auto;
    padding: 0px;
    margin-top:60px;
    background-color: #0e0a04; 
    background-image: url(/bundles/tabredirector/images/background-image.png); 
    background-repeat:no-repeat; 
    background-position: -70px -20px;  /*x,y*/
    overflow:visible;
}

谢谢!

我最终实现了什么:

感谢您的所有建议,它们启发了我的解决方案。我最终的解决方案是使用主 div(position:relative于 z-index:-1)和我的容器(position:absolute z-index:1)并将图像粘贴在可以绝对定位的主 div 中。这样,内容始终位于顶部,背景不会被剪裁。

最佳答案

首先发布您的标记和 CSS。还给 div 一个宽度:100%。

关于css - 使用 HTML 和 CSS 溢出到正文中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9327157/

相关文章:

html - 是否有任何选项可以动态调整绝对定位 child 的高度到他的相对 parent ?

blogger.com 的 HTML 加载页面

html - 尝试使用 CSS Sprites 减少 HTTP 请求,但现在图像显示不正确

jquery - 在选中的复选框上动态更改背景图像

html - 菜单项显示其子项的延迟时间

HTML/CSS : How to show a background picture that has 100% width and 100% height below a header

CSS:背景图像不透明的背景颜色

javascript 导航器对象未显示在警告框中

html - 屏幕分辨率低时如何创建下拉菜单?

html - 在父容器 Bootstrap 中填充图像