Добрый вечер, форумчане. Подскажите, как правильно вставить картинку в цветную часть меню? Хочется поменять простую цветную заливку на картинку.
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .side-item-left {border-bottom:1px solid #c3e3f3; margin-bottom:20px; box-shadow:0px 1px #FFF;}
.side-item-left .side-title {padding:0 15px 0 20px; margin-bottom:10px;}
.side-item-left .side-content {color:#909090; padding:0 20px 20px 20px; font-size:13px;}
nav.side-item-left {background-color:#fff; border-bottom:0; overflow:hidden;
border-radius:4px; box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2); margin:0 10px 20px 10px;}
.main-menu {padding:0 0 10px 0;background: linear-gradient(to bottom, #ffffff 20%,#f8f8f8 100%);}
.main-menu li:first-child {font-size:16px; font-weight:700; padding:10px 20px; margin-bottom:10px;}
.main-menu a {color:#5c5c5c; padding:5px 20px; display:inline-block;}
.main-menu a:hover, .main-menu li:first-child {color:#fff; background-color:#6fb4e3;}
.main-menu.yellow a:hover, .main-menu.yellow li:first-child {color:#fff; background-color:#f4b756;}
.main-menu.green a:hover, .main-menu.green li:first-child {color:#fff; background-color:#a1d48d;}
.main-menu.red a:hover, .main-menu.red li:first-child {color:#fff; background-color:#eb7f73;} |
|
| HTML5 |
1
| <aside class="col-left"> <nav class="side-item-left"> <ul class="main-menu blue"> <li>Заголовок</li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> </ul> <ul class="main-menu yellow"> <li>Заголовок</li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> </ul> <ul class="main-menu green"> <li>Заголовок</li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> </ul> |
|
(
