Чому так складно? Ваше рішення було майже правильним, за винятком способу простіше зробити візерунок прозорим, а колір фону суцільним . PNG може містити прозорі плівки. Тому використовуйте фотошоп, щоб зробити візерунок прозорим, встановивши шар на 70% та змінивши зображення. Тоді вам потрібен лише один селектор. Працює крос-браузер.
CSS:
.background {
background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
background-color: rgb(248, 247, 216);
}
HTML:
<div class="background">
...
</div>
Це основні. Приклад використання слід , де я переключився від background
до , background-image
але обидва властивості працює однаково.
body { margin: 0; }
div {
height: 110px !important;
padding: 1em;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: white;
text-shadow: 0 0 2px #333;
}
.background {
background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
}
.col-one {
background-color: rgb(255, 255, 0);
}
.col-two {
background-color: rgb(0, 255, 255);
}
.col-three {
background-color: rgb(0, 255, 0);
}
<div class="background col-one">
1. Background
</div>
<div class="background col-two">
2. Background
</div>
<div class="background col-three">
3. Background
</div>
ПРОСИМО ЗАЧЕКАЙТЕ ХВІЛЬНУ! ВИНАЄТЕ ДЕЙНИЙ ЧАС ЗАВАНТАЖИТИ ВНУТРІШНІ ПАРТНЕРИ.
Цей веб-сайт здається досить повільним ...