css - Make a darker box in a canvas with pattern -


i have defined rule has-pattern in css:

.has-pattern {   background-image: url('../images/patterns/pattern-1.png');   background-repeat: repeat;   background-position: left top; } 

as result, section has-pattern applied (<section class="team section has-pattern">) has following background:

enter image description here

now, want insert smaller box inside section, darker background color. question how not make darker box break existing pattern.

i tried add follows in css:

.team .box-inner {     padding: 60px;     background-color: #3fa07a;     background-image: url('../images/patterns/pattern-1.png');     background-repeat: repeat; } 

the problem pattern of 2 levels not match:

enter image description here

does has solution?

you can acheive not using pattern inner box using rgba colour value instead, allowing pattern show through transparency. eg. background: rgba(0,0,0,0.2);

demo @ https://jsfiddle.net/xudg5d93/

for futher control on how transparency affects things, might want @ css filter attribute well: https://css-tricks.com/almanac/properties/f/filter/


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -