我正在尝试搜索有关我的问题的所有答案,但没有找到答案。 具有最大宽度的Body选择器:85%,一些选择器是标题,我希望它的背景图像具有100%的宽度-在body选择器属性后面。
HTML代码-
<body>
<header>
<div></div>
</header>
</body>
CSS代码-
body {
width: 85%;
}
.header {
display:flex;
position: relative;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: center;
background-color: rgba(0,0,0,0.8);
background-image: url(../assets/header-bg.png);
background-repeat: no-repeat;
background-position: center 120%;
background-size: cover;
overflow: visible;
padding: 10% 0 10% 0;
.header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
答案 0 :(得分:0)
首先,您的选择器是错误的。您不是选择 class header
,而是选择元素,因此不需要类选择器.
。其次,您可能想将标题设置为屏幕的整个宽度吗?为此,您可以使用视口单位。 100vw是视口的全宽,1vw是视口的全宽。然后,您仍然必须将表头向左移动以补偿其在主体内的初始位置。
您的代码如下:
body {
width: 85%;
}
header {
display: flex;
position: relative;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(../assets/header-bg.png);
background-repeat: no-repeat;
background-position: center 120%;
background-size: cover;
overflow: visible;
padding: 10% 0 10% 0;
/* here */
width: 100vw;
margin-left: 7.5vw;
}
header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}
<body>
<header>
<div></div>
</header>
</body>
答案 1 :(得分:0)
我相信这是您要寻找的,但是如果不是,请澄清您的问题:
与其将主体的宽度设为85%,不如将其设置为100%,然后将背景应用于主体,这样背景将具有100%的宽度,标题为85%的宽度。
<body>
<header>
<div></div>
</header>
</body>
body {
width: 100vw;
min-height: 100vh;
background-image: url(../assets/header-bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0;
}
header {
height: 10%;
width: 85%;
margin: auto;
display: flex;
position: relative;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: center;
background-color: black;
padding: 10% 0 10% 0;
}