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

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

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

Я попытался Css .boxed {фон: прозрачный;}

<!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; 
}

источник

2014-01-20 user3216013

Этот вопрос дублируется http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text –

Почему вы не используете свойство cacity непрозрачности. Проверьте [this] (http://www.w3schools.com/css/css_image_transparency.asp) –

непрозрачность добавит прозрачность для всех содержимого div, включая текст. –

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

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

Fiddle Demo

источник

2014-01-20 17:28:02

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

ответ

Смежные вопросы