[英]CSS Fail - background-position, background-repeat, background-size, background-attachment
When I put the following into a div
in the main body
, this WORKS:当我将以下内容放入body
中的div
时,这可以工作:
<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">
BUT when I use CSS is DOES NOT WORK:但是当我使用 CSS 时不起作用:
<style type="text/css" media="all">
.myMainDiv {
width:100%;
height: 100%;
min-height: 100vh;
background-color: #FFFFFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">
It seems to be going wrong, because I need a different pic for each background and then this results in the background-repeat
etc being ignored.它似乎出错了,因为我需要为每个背景提供不同的图片,然后这导致background-repeat
等被忽略。 (Note: also different divs will have different display values, either block or none, so they need to be separately stated as well, but that is not the problem.) (注意:不同的 div 也会有不同的显示值,block 或 none,所以它们也需要单独说明,但这不是问题。)
Anyone know why and if there is a workaround.任何人都知道为什么以及是否有解决方法。
Hmm.唔。 Seems you are overwriting your CSS.似乎您正在覆盖您的 CSS。 Using backgorund: url('./images/pic.jpg')
as an inline style is the problem.使用backgorund: url('./images/pic.jpg')
作为内联样式是问题所在。 You are overwriting all of your CSS properties ( background-position
, background-repeat
, etc...) with this inline style.您正在使用此内联样式覆盖所有 CSS 属性( background-position
、 background-repeat
等)。 Replace backgorund: url('./images/pic.jpg')
with backgorund-image: url('./images/pic.jpg')
.将backgorund: url('./images/pic.jpg')
替换为backgorund-image: url('./images/pic.jpg')
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.