Народ помогите. есть класс css с фоном в виде картинки.
.bg-map {
background: url("/img/bg/bg-map.jpg") no-repeat;
background-color: #d10042;
background-size: cover;
background-position: 20% 15%;
padding: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
а как сделать, что еще и цвет был поверх нее? чтобы именно целиком перекрывало?
расположить отдельный div перед картинкой и применить функцию rgba и свойство position:absolute
Наложить поверх слой. Читаем про z-index. Хотя проще тупо на сервере с помощью gd2
Есть замечательное свойство опасити накладываем слой с бекграундом нужным цветом задаем ему опасити 0.3 к примеру и вызываем его при наведении мыхи. Блин через джейквери лучше но через ксс тоже можно.
<style type="text/css">
body {background-color: {color:background}; background-image:{image:background}; color:{color:text}; font:11px calibri; text-align: center;}
a:link, a:active, a:visited{color: #000; text-decoration:none;}
a:hover{color: #000;}
p {margin: 6px 0 0 0}
h1 {text-align: center;font-weight: normal;font-family:calibri; font-size: 14px; color: #000;}
s {color: #000000;}
i {color: #000000;}
b, strong {color: #000000;}
u, span.sublinha {color: #000; text-decoration: none; border-bottom:1px solid #000000;}
blockquote {margin: 3px; border-left: 3px solid {color:background}; padding-left: 5px; }
blockquote blockquote {margin: 0px 5px 0px 5px; border-left: 3px solid {color:background};}
blockquote blockquote blockquote {margin: 0px 5px 0px 5px; border-left: 3px solid {color:background}; }
blockquote blockquote blockquote blockquote {margin: 0px 5px 0px 5px; border-left: 3px solid {color:background}; }
blockquote img{max-width: 470px!important}
blockquote blockquote img{max-width: 450px!important}
blockquote blockquote blockquote img{max-width: 430px!important}
blockquote blockquote blockquote blockquote img{max-width: 410px!important}
#container {width: 420px; margin:50px auto: 50px auto;}
iframe#tumblr_controls {
top:0px! important;
right:3px! important;
position: fixed! important;
-webkit-transition: opacity 0.7s linear;
opacity: 0.4;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
z-index:999999999999999999;}
iframe#tumblr_controls:hover{
-webkit-transition: opacity 0.7s linear;
opacity: 1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
z-index:999999999999999999999;}
#entries {width:450px; float:left; margin-left:530px; margin-top:20px;position:relative; z-index:999; padding-right:0px; padding-top:0px}
.entries {width:450px; padding:5px; background-color:#ffffff; margin:0px 0px 0px 0px; margin-bottom:-0px; float:right; text-align:justify; font-family:calibri; font-size:11px; font-family:calibri; }
.image {text-align: center; border: 0px}
.image img {width: 450px; margin-bottom: 1px; }
.image img:hover { -webkit-filter: grayscale(0%);-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;all 0.3s ease-out;}
.quote {font-family:calibri; text-align: justify; font-size: 12px; line-height:15px; padding: 2px; border-top: px solid #eee;}
.quotesource {text-align:left; text-transform: none; margin-bottom: 2px;font-family:cambria; font-size: 10px;background-color:#;border-bottom:3px solid #eee;}
.chat {line-height: 13px; list-style: none }
.chat ul {line-height: 13px; list-style: none; padding: 5px; line-height:14px;}
.person1 {color: {color:text}; padding: 2px; }
.person1 .label {font-weight: bold; color:{color:text}}
.person2 {color: {color:text}; padding: 2px; }
.person2 .label {font-weight: bold; color:{color:text}}
.player {background-color: #000; text-align: left; display:block;}
#asker {font-family:cambria; text-align: justify; background-color:#;color:#000; font-size:12px;padding:2px; border-bottom:2px solid #f2f2f2; border-left:px solid #f2f2f2; border:px dashed #ddd }
.answer {padding: 1px; font-family:cambria; font-size:12px;}
.answer img {max-width: 400px;}
#asker a:hover {color:;}
#ssource{margin-left:10px; display:none}
#hoverphoto { padding:3px;opacity:0; margin:0px 0px 495px 495px; filter: alpha(opacity = 0.2); position:absolute; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;margin-top:-5px; background-color:transparent;text-transform:lowercase }
#hoverphoto:hover {color:#777;}
.entries:hover #hoverphoto { opacity:1.0;}
</style>
