<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
javascript - CSS - 容器左侧的颜色填充
标签 javascript html css
我正在尝试对 div 左侧(容器外)进行颜色填充 -
它需要从容器左侧的右侧到窗口宽度的边缘(即使在调整大小时也是如此)。有谁知道我该怎么做？我最初的想法是在相同颜色的左侧重复一个 5px 宽度的图像，但不确定是否可以这样做。提前致谢。
我的标志在这个 css 的左上角
.serviceof {
width: auto;
float: left;
background-color: #012051;
padding: 15px;
position: absolute;
}
和我的html
<div class="logobg" style="background-image:url(themes/startertoplight/img/logobg.png)"></div>
<div class="serviceof">
<img src="themes/startertoplight/img/service.png" height="114px">
</div>
最佳答案
您可以使用几个伪元素来做到这一点。
没有额外的 HTML，它会自动调整大小以适应容器宽度和横幅高度。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 80%;
margin: auto;
border: 1px solid grey;
border-top: none;
height: 250px;
}
.banner {
height: 75px;
background: green;
position: relative;
}
.banner::before,
.banner::after {
content: '';
width: 50vw;
position: absolute;
top: 0;
height: 100%;
}
.banner::before {
background: rebeccapurple;
right: 100%;
}
.banner::after {
left: 100%;
background: inherit;
}<div class="container">
<div class="banner"></div>
</div>关于javascript - CSS - 容器左侧的颜色填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34885882/