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:
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:
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
Post a Comment