[英]CSS: Element's relative size makes background-image disappear
I have a background-image that is 800x480 pixels. 我有一个800x480像素的背景图像。 When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
当我的元素具有固定大小时,我会看到背景图像,但是当元素具有相对大小或最大宽度时看不到。
Working CSS script 工作CSS脚本
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing 没有背景图片显示的CSS脚本
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window? 我该怎么做才能显示背景图像,但具有相对于浏览器窗口的元素大小?
By request, here are the parent DIVs 根据要求,这是父级DIV
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles 这是父级DIV CSS样式
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
Using the following HTML: 使用以下HTML:
<div class="settings-container"></div>
With the following CSS: 使用以下CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. 导致背景占据视口的宽度和高度的100%。 It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply
height
somewhere else in your document. 如果不查看整个图片,很难正确地解决您的问题,但是我的猜测是您将需要在文档中的其他位置应用
height
。
You may also run into issues with using position: absolute
, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever. 您可能还会遇到使用
position: absolute
,但同样,这很大程度上取决于您将其如何应用到站点/应用程序/任何对象的更广泛的情况。
You have to change the position:absolute
in .settings-container
to position:relative
as your image in this case act as a Child
for .settings-container
and the image should be according to its parent. 你必须改变的
position:absolute
在.settings-container
到position:relative
在这种情况下,充当您的图片Child
为.settings-container
和图像应根据其父母。 So Position:absolute
will not work. 因此,
Position:absolute
不会起作用。
Check the snippet 检查代码段
.main-guy { position:absolute; width: 100%; height: 100%; margin: auto; background:#999; } .screen-inside { margin:auto; position:relative; height:60%; width:66.66%; background-color:blue; } .audio-container, .settings-container { width:100%; /* Same result with max-width */ height:100%; background-image:url(http://reservations.life/css/images/bg-01.jpg); background-repeat: no-repeat; background-size: cover; position:absolute; }
<div ng-controller="MainController" class="main-guy"> <div class="screen-inside"> <div class="audio-container" ng-controller="AudioController"> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.