Как сделать прозрачную коробку без влияния на текст?

Question

Как сделать прозрачную коробку без влияния на текст?

0

Я только что начал код, и я решил сделать сайт школьного проекта, но я не могу сделать коробку прозрачной, не затрагивая текст. Вот ссылка для моего кода:

Надеюсь, вы, ребята, можете мне помочь :)

Я попробовал Css.boxed {background: transparent;}

<!DOCTYPE html>
 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
  </head>

   <body>
       <h1>Bjerg</h1>
      <div id="wrapper">
 <div id="nav">
           <ul id="menu">
              <li><a href="">Home</a></li>
    <li><a href="">About Us</a>

 <ul>
    <li><a href="">The Team</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Vision</a></li>
 </ul>
    </li>
    <li><a href="">Products</a>

 <ul>
    <li><a href="">Cozy Couch</a></li>
    <li><a href="">Great Table</a></li>
    <li><a href="">Small Chair</a></li>
    <li><a href="">Shiny Shelf</a></li>


 </ul>
    </li>
    <li><a href="">Contact</a>
 <ul>
    <li><a href="">Online</a></li>
    <li><a href="">Right Here</a></li>
    <li><a href="">Somewhere Else</a></li>
 </ul>
    </li>
 </ul>
 </div>

</body>

И мой Css:

h1{
    text-align:center;
}
Body {
  text-align: ;
  background: url("http://goo.gl/wkzbXp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

#wrapper
{
    width: 1024px;
    height: auto;
    margin: auto; 
}
#menu
{
     margin:auto;
     width:400px;
     height: 100px;
}
#content
{
    margin:auto;
    width: 760px;
    height: auto;
}


.container {
    overflow:hidden;
    list-style:none;
}

.container li {
    float:left;
    text-align:center;
    margin:20px; 
}

.container img {
    border:2px solid #000;
    display:block;
}
.sortfarve {
    color:#000;
}
.hvidfarve {
    color:#fff;
}

user3216013 20 янв. 2014, в 18:54

Источник

1

Этот вопрос дублируется stackoverflow.com/questions/637921/… stackoverflow.com/questions/806000/…
daniel__ 20 янв. 2014, в 17:29
0

Почему бы вам не использовать свойство css 'opacity'. Проверьте это
Free-Minded 20 янв. 2014, в 17:30
0

Непрозрачность добавит прозрачность для всего содержимого Div, включая текст.
Pranav C Balan 20 янв. 2014, в 17:34

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Этот вопрос дублируется stackoverflow.com/questions/637921/… stackoverflow.com/questions/806000/…
Почему бы вам не использовать свойство css 'opacity'. Проверьте это
Непрозрачность добавит прозрачность для всего содержимого Div, включая текст.

Pranav C Balan · Answer 1 · 2014-01-20T14-53-00.000Z

Вы можете использовать rgba(), последний параметр может использоваться для определения непрозрачности

.boxed {
      background: rgba(123,0,0,0.5);
      /*........................^......opacity......_*/
 }

Демо-версия скрипта