CSS - 颜色填充到容器

我想要的颜色的左侧填写一个div的左边（在容器外） -CSS - 颜色填充到容器

它需要从右面去容器的左侧到窗口宽度的边缘（甚至在调整大小时）。有没有人有任何想法，我可以做到这一点？我最初的想法是重复一个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>

来源

2016-01-19 Alex Murray

[请输入您已尝试标记和你有什么麻烦的描述（http://whathaveyoutried.com）。要求别人为你编写代码不会对未来的任何人有所帮助。 – zzzzBov

请添加html代码 – nlopez

您是否尝试过添加左边框？ –

您可以用几个伪元素的做到这一点。

没有额外的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>

来源

2016-01-19 20:38:18

真棒这工作完美！非常感谢 –

你可以使用CSS3渐变在只有1个像素得到强硬。您可以根据需要调整以下内容。

.banner{ 
    background: #009dff; 
    background: -moz-linear-gradient(left, #009dff 150px, #006e2e 151px, #006e2e 151px); 
    background: -webkit-linear-gradient(left, #009dff 150px,#006e2e 151px,#006e2e 151px); 
    background: linear-gradient(to right, #009dff 150px,#006e2e 151px,#006e2e 151px); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009dff', endColorstr='#006e2e',GradientType=1); 
    width: 100%; 
}

例如参见this fiddle。

来源

2016-01-19 20:19:25 dval

试试这个：

.bar{ 
    width: 100%; 
    height: 114px; 
} 
.container{ 
    width:960px; 
    display: inline-block; 
    position: relative; 
} 
.serviceof{ 
    display: inline-block; 
    background-color: #012051; 
    height: 114px; 
    width: 15px; 
} 
    .logobg{ 
    background-image:url(themes/startertoplight/img/logobg.png); 
    position: relative; 
    left:0; 
    top:0; 
} 



<div class="bar"> 
    <div class="serviceof"> 
    </div> 
    <div class="container"> 
     <div class="logobg"> 
     </div> 
    </div> 
</div>

来源

2016-01-19 20:21:36 nlopez

CSS - 颜色填充到容器

回答

相关问题