Перейти к содержимому



Установка прозрачного background

#1 Andref1rst

Andref1rst
  • Пользователь
  • 3 сообщений
  • Репутация: 0
0

Отправлено 08 Апрель 2015 - 18:38

Приветствую! Прошу Вашей помощи - не могу победить background.

Иммеется блок, в котором необходимо установить прозрычный фон. На главном же фоне имеется картинка. Проблема следующая: ни opacity: 0.5, ни background-color: rgba (255,0,0,0.5), background: transparent, даже картинка nobg.png (прозрачная имеется ввиду) командой background: url(/nobg.png) не помогает. Может еще есть какие способы? Цвет удается установить без проблем. Если нужно могу выложить коды css с блоком.


 

 

Сообщение отредактировал Andref1rst: 08 Апрель 2015 - 19:12

  • 0

#2 Slava1988

Slava1988
  • Пользователь
  • 162 сообщений
  • Репутация: 13

Отправлено 08 Апрель 2015 - 18:44

ты лучше линк на донора скинь поглядим)))


  • 0

#3 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 08 Апрель 2015 - 18:56

@Andref1rst,  вот такое решение попробуйте.

background: transparent;

  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#4 Andref1rst

Andref1rst
    Topic Starter
  • Пользователь
  • 3 сообщений
  • Репутация: 0

Отправлено 08 Апрель 2015 - 19:17

@Slava1988, к сожалению линк не могу дать, так как сайтик работает пока на локальной машине. Могу поделиться скрином и файликами style.css (http://my-files.ru/qfq9qn) и sidebar.php (http://my-files.ru/aan2pr) (тот самый блок, который требуется сделать прозрачным).

Вот картинка: 0be0d92d2452.jpg

@TimurR, тоже пробовал (забыл про такую команду). 

/*  base : layout
/* ------------------------------------ */
#wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.content { width: 100%; position: relative; }
.main 
.main-inner { position: relative; min-height: 600px;  /* instead of sticky footer */ }
.pad { padding: 30px 30px 20px; }

/*  base : layout columns
/* ------------------------------------ */
.col-1c .sidebar,
.col-2cl .s2,
.col-2cr .s2 { display: none!important;}

/* 2 column, content left */
.col-2cl .main-inner {background: #272526;}
.col-2cl .s1 { float: right; margin-right: -340px;}
.col-2cl .content { float: left;}

/* 2 column, content right */
.col-2cr .main-inner { background: #272526;}
.col-2cr .s1 { float: left; ;}
.col-2cr .content { float: right;}

/* 3 column, content middle */
.col-3cm.main { background: #272526;}
.col-3cm .main-inner { background: #272526; padding-left: 340px; padding-right: 260px; }
.col-3cm .s1 { float: left; ; }
.col-3cm .s2 { float: right; margin-right: -260px; /* ingenuity! */ position: relative; right: -100%; }
.col-3cm .content { float: right; }

/* 3 column, content left */
.col-3cl.main { background-image: #272526;}
.col-3cl .main-inner { background: #272526; repeat-y right 0; padding-right: 600px; }
.col-3cl .s1 { float: right; margin-right: -600px; }
.col-3cl .s2 { float: right; margin-right: -260px; }
.col-3cl .content { float: left; }

/* 3 column, content right */
.col-3cr.main { background-image: #272526;}
.col-3cr .main-inner { background: #272526; repeat-y left 0; padding-left: 600px; }
.col-3cr .s1 { float: left; ; }
.col-3cr .s2 { float: left; ; }
.col-3cr .content { float: right; }

/*  base : sidebar
/* ------------------------------------ */
.sidebar { padding-bottom: 20px; position: relative; z-index: 2; }
.sidebar .pad { padding-left: 20px; padding-right: 20px; }
.sidebar-top { padding: 15px 30px; }
.sidebar-top p { float: left; color: #fff; color: rgba(255,255,255,0.8); font-size: 16px; font-weight: 600; text-transform: uppercase; line-height: 24px; padding: 3px 0; }
.sidebar-toggle { display: none; text-align: center; cursor: pointer; width: 100%; height: 50px;
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1); }
.sidebar-toggle i { font-size: 38px; color: #fff; padding: 5px 0; }
.s1-expand .s1,
.s2-expand .s2 {-moz-transition: width .2s ease; -webkit-transition: width .2s ease; transition: width .2s ease; }

Выше часть кода из style.css, где мне кажется и находится данный sidebar.php с его стилем.

 

Еще для информации: тема для WordPress называется hueman. Буду очень благодарен. Очень нужно сделать. Последнее с чем не могу справиться.


Сообщение отредактировал Andref1rst: 08 Апрель 2015 - 21:15

  • 0

#5 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 08 Апрель 2015 - 21:53

@Andref1rst, какой результат Вы хотите увидеть? Любой блок по дефолту имеет прозрачный фон, в данном случае фон прозрачный и поэтому вы видите идущий следом общий фон.  


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#6 Andref1rst

Andref1rst
    Topic Starter
  • Пользователь
  • 3 сообщений
  • Репутация: 0

Отправлено 09 Апрель 2015 - 04:30

@TimurR, я и хочу увитеть прозрачный фон блока. Но по дефолту он белый. При установке полностью прозрачной картинки фон белый. Меняю цвет - все получается, но создав условия типа opacity: 0.5 прозрачным становится все, включая содержимое блока. Возможно есть какой способ придать прозрачность отдельно фону блока, может css как то изменить, создать новые свойства к блоку.

В конкретном примере указана левая сторона сайта, в коде она звучит так: 

/* 2 column, content left */
.col-2cl .main-inner {background: #272526;}
.col-2cl .s1 { float: right; margin-right: -340px;}
.col-2cl .content { float: left;}
/* 3 column, content left */
.col-3cl.main { background-image: #272526;}
.col-3cl .main-inner { background: #272526; repeat-y right 0; padding-right: 600px; }
.col-3cl .s1 { float: right; margin-right: -600px; }
.col-3cl .s2 { float: right; margin-right: -260px; }
.col-3cl .content { float: left; }

Сообщение отредактировал Andref1rst: 09 Апрель 2015 - 04:31

  • 0

#7 hnerd

hnerd
  • Пользователь
  • 284 сообщений
  • Репутация: 18

Отправлено 09 Апрель 2015 - 10:03

Может еще есть какие способы? Цвет удается установить без проблем. Если нужно могу выложить коды css с блоком.

 

Попробуйте так:

background: none !important;

Если не поможет, то пропишите стили просто к

<div style="background: none !important;"></div>

- не знаю к какому div, посмотрите сами. если разбираетесь.

 

и последний вариант - это скрипт:

$("#id или .class вашего блока").css({'background':'none !important'});

То же самое можно проделать с opacity.


Сообщение отредактировал hnerd: 09 Апрель 2015 - 10:05

  • 0


Оформление форума – IPBSkins.ru