Jump to content
  • 0

Проблемы с прозрачностью


sfer23
 Share

Question

Суть проблемы в следующем:

Есть картинка с position: fixed; z-index: -3;

Рядом с ней есть блок #content с background: rgba(255, 255, 255, 0.9) в нём располагается основной контент сайта (по размерам он меньше фоновой картинки, спозиционирован и т.д.)

А внутри #content есть вертикальная менюшка с float: left и на скрипте скользящая при прокрутке страницы, и вот надо что-бы эта менюшка имела границу со всех сторон 5px прозрачную, т.е. не то что б белый полу прозрачный фон, а должна быть видна фоновая картинка, которая под контентом.

Чего только не придумывал и gif прозрачный и rgba и игрался с z-index (ставил у контента = -1, а у враппера менюшки = -4, у менюшки = 0) ничего нтак и не придумал. Единственое что получилось - это разбить контент на части и склеить вокруг менюшки, но тоже не вариант, т.к. раньше фон был не картинкой, и фон враппера просто ставился такой же как у боди, и проблем не было, после этого уже нарастилось кучу функционала, а теперь вот вздумалось фон поменять на картинку (да так что б растягивался код страницу)

Если чего непонятно - спрашивайте, объясню, код предоставить не могу ибо верстали сайт уже человек 6 и по хорошему бы надо с нуля всё переверстать (css в 11 тысяч строк хотя бы чего стоит)

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

CSS:


.content {
margin: 20px;
padding 10px;
background-color: rgba(255, 255, 255, 0.8);
}
.menu-wrap {
float: left;
margin: 15px;
padding: 15px;
background-color: rgba(255, 0, 0, 0.3);
}
.menu {
background-color: rgba(255, 255, 255, 0.8);
}
.bg {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -3;
}

и собственно HTML:


<div class="content">
<div class="menu-wrap">
<div class="menu">
Menu item 1 <br />
Menu item 2 <br />
Menu item 3
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum nibh at augue porttitor ultrices. Nulla accumsan venenatis sollicitudin. Donec non pellentesque lorem. Nulla congue dolor at arcu lobortis viverra. Curabitur non nulla felis. Quisque a volutpat tellus. Phasellus nulla ligula, euismod ut eleifend eu, viverra vel ligula.</p>
<p>Suspendisse potenti. Sed sodales arcu tincidunt purus dapibus posuere varius augue convallis. Fusce et tellus nec tellus posuere imperdiet vel in ante. Curabitur congue metus sit amet nibh imperdiet pharetra. Integer lorem lacus, volutpat a suscipit eu, porta id mi. Nunc et dolor id nisl laoreet lacinia ut euismod lacus. Nunc erat ligula, accumsan sed mollis adipiscing, tempor vel mauris. Suspendisse eget justo a urna rhoncus cursus non et ligula. Etiam scelerisque, sem faucibus placerat aliquam, est neque varius nunc, in egestas mauris felis volutpat ante. Fusce lobortis, erat luctus fermentum gravida, mauris lectus aliquet tellus, at scelerisque ipsum sem sed tortor. Sed nec sem quis mauris eleifend interdum vel dapibus justo. Curabitur vehicula tempus elit, a porttitor velit elementum vitae. Aliquam dictum sem sit amet enim malesuada convallis. Mauris sodales pellentesque tristique. Aenean sed nunc ac est aliquet porttitor. Nam vestibulum magna non augue accumsan sed suscipit metus convallis.</p>
<p>Curabitur pulvinar, metus vitae accumsan placerat, metus lacus mattis urna, id hendrerit sem lorem eget ligula. Aenean blandit tincidunt dignissim. Ut vehicula lectus nec est tincidunt rhoncus. Nunc rutrum pretium risus sit amet tincidunt. Sed sit amet turpis nibh, sit amet suscipit ante. Aenean mauris nibh, euismod ut feugiat id, viverra id nibh. Nullam semper gravida nibh, eget posuere lacus rhoncus a. Phasellus volutpat euismod diam quis sagittis. In porta ultrices turpis, sagittis porta velit viverra vel. Proin ac porttitor enim. Donec ut augue odio. Suspendisse gravida dolor id arcu consectetur suscipit. Phasellus vel risus velit.</p>
<p>Proin eget mattis urna. Ut in nisl eget nisl porta tincidunt. Praesent et est dolor. Nam nec enim a diam porta sodales. Integer nulla diam, molestie vel malesuada id, porta vitae erat. Quisque aliquam ullamcorper mi ac imperdiet. Curabitur eget metus nibh, non blandit lacus. Mauris et lorem libero, eu fermentum libero. Phasellus quis lorem at turpis auctor lacinia quis nec quam.</p>
<p>Pellentesque sodales orci eget quam varius in fringilla lacus convallis. Quisque facilisis lectus quam, ac bibendum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus leo justo, eleifend vitae mollis id, adipiscing id risus. In hac habitasse platea dictumst. Cras hendrerit imperdiet sapien eu adipiscing. Donec sit amet mi lacus. Sed consectetur ligula vel ipsum facilisis mollis.</p>
</div>
<img src="http://lh5.ggpht.com/-RRmLM33NBuA/TiPi2-gKmCI/AAAAAAABJw4/Qep72ezABtE/s720/Bild%252520069.jpg" alt="" class="bg" />

Вот та розовая рамочка вокруг блока меню должна быть полностью прозрачной и выводить фоновую картинку.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy