Прозрачный блок чтоб было видно фон html

автор РыжаяЯ Сентябрь 29th 2011, 12:25

День добрый! Есть задачка:
Фоном является картинка, нужно наложить полупрозрачный блок белого фона и написать на нем "Я - это гордо!"
Начиталась всякого, каша в голове...Хелп! Вы ж тут все умнички помогите пожайлуста, дайте код.

Берем некий блок с фоновой картинкой, ставим внутрь контейнер с текстом:

Код:: <div class="my_block">Я - это гордо!</div>

Добавляем в CSS правила:

Код:: .my_block { background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/dfg10.png") repeat center; padding: 5px; width: 150px; text-align: center; }

и сохраняем.

Прозрачный блок чтоб было видно фон html 46705

автор РыжаяЯ Сентябрь 29th 2011, 12:59

Я в этом еще маленькая, можно мне код целиком
<div class="my_block">Я - это гордо!</div> - это я знаю куда ставить между боди, а где живут правила CSS не особо...
Вышло так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
.my_block {
background: transparent url("https://i.servimg.com/u/f44/16/54/26/99/dfg10.png") repeat center;
padding: 5px;
width: 150px;
text-align: center;
}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div class="my_block">Я - это гордо!</div>
</body>
</html>

Но оно не работает....

Правила CSS на отдельной странице ставятся в теги <style type="text/css">...</style>
Попробуйте так:

Код:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/smiley.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Страница</title> <style type="text/css"> body { background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/klen1310.jpg") repeat center; } .my_block { background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/dfg10.png") repeat center; padding: 5px; width: 150px; text-align: center; } </style> </head> <body> <div class="my_block">Я - это гордо!</div> </body> </html>