За последние 24 часа нас посетили 16735 программистов и 1692 робота. Сейчас ищет 861 программист ...

Свойства изобрадения заднего фона страницы!

Тема в разделе "PHP для новичков", создана пользователем Panich, 6 июн 2011.

  1. Panich

    Panich Активный пользователь

    С нами с:
    10 май 2011
    Сообщения:
    548
    Симпатии:
    0
    Адрес:
    Ростов-Москва
    Не отображается изображение фона сколько не старался!
    Код страницы:
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2.   <head>
    3.   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    4.   <meta name="title" content="">
    5.   <meta name="keywords" content="">
    6.   <meta name="description" content="">
    7.   <link href="../css/style.css" rel="stylesheet" type="text/css" media="screen"/>
    8.   <title>"БЫСТРЫЕ ВСТРЕЧИ"</title>
    9.   </head>
    10.   <body>
    11.   <!-- <img src="img_index/123.png" alt=""/> -->
    12.     <table class="table_main" border="0" cellspacing="0" cellpadding="0">
    13.       <tr>
    14.        <!--                                   ШАПКА                               -->
    15.         <td class="td_heder">
    16.         </td>
    17.         <td class="td_heder_center">
    18.         </td>
    19.         <td class="td_heder">
    20.         </td>
    21.       </tr>
    22.       <div id="forbody">
    23.       <tr>
    24.        <!--                                ЛЕВЫЙ БЛОК                              -->
    25.         <td valign="top" rowspan="2">
    26.         <form  action="../testreg.php" method="POST" id="info">
    27.         <h2>ВОЙТИ НА САЙТ</h2>
    28.           <div id="email-wrap" class="slider">
    29.             <label for="name">Логин:</label>
    30.             <input id="name" type="text" name="login" width="20" maxlength="20">
    31.           </div>
    32.           <div id="pass-wrap" class="slider">
    33.             <label for="pass">Пароль:</label>
    34.             <input id="pass" class="" type="password" name="pass" width="20" maxlength="15">
    35.           </div>
    36.           <div>
    37.             <input type="checkbox" name="autovhod" value="1"><strong>Запомнить меня.</strong>(не безопасно)
    38.           </div>
    39.           <input id="btn" type="submit" name="btn" value="НАЧАТЬ ЗНАКОМИТЬСЯ">
    40.           <br><a id="text_reg" href="../reg.php">ЕЩЁ НЕ ЗАРЕГИСТРИРОВАН</a>
    41.           <br><a id="text_reg" href="../send_pass.php"><strong>Забыли пароль?</strong></a>
    42.           </form>      
    43.         </div>
    44.         </td>
    45.         <td>
    46.        
    47.         </td>
    48.         <td valign="top" rowspan="2">
    49.          <!--                             ПРАВЫЙ БЛОК                         -->
    50.            <table class="table_right">
    51.               <tr>
    52.                  <td><h6></h6></td>
    53.               </tr>
    54.               <tr>
    55.                  <td class="td_bottom">
    56.                      
    57.                  </td>
    58.               </tr>
    59.               <tr>
    60.                  <td><h6></h6></td>
    61.               </tr>
    62.               <tr>
    63.                  <td class="td_bottom">
    64.                    
    65.                  </td>
    66.               </tr>
    67.               <tr>
    68.                  <td></td>
    69.               </tr>
    70.            </table>
    71.        
    72.         </td>
    73.       </tr>
    74.       <tr>
    75.         <td valign="top" height="455">
    76.                                
    77.           <img src="../img_index/moscow.jpeg" alt="Согласились" usemap="#Map">
    78.            <map name="map">
    79.            <area shape="poly" coords="10,20,82,90" href="____.html">
    80.          
    81.            </map>
    82.         </td>
    83.       </tr>
    84.       <tr>
    85.      
    86.         <td colspan="3">&nbsp;</td>
    87.       </tr>
    88.   </table>
    89.  
    90.   </body>
    91. </html>
    Код свойств:
    [CSS] /* ФОРМА ДЛЯ ВВОДА ДАННЫХ ПОЛЬЗОВАТЕЛЯ */
    /* свойства формы при входе на сайт */
    form{
    width:210px;
    padding:0 5px 5px;
    margin:auto;
    background-color:#81FD11;
    -moz-border-radius:10px;
    border: 2px solid #933791;
    /* градация цвета фона формы */
    -moz-box-shadow: 0 1px 20px rgba(0,0,0,.4), 0px 30px 30px 40px rgba(220,220,220,.5) inset;
    }

    #5ED037

    label{
    cursor:pointer;
    display:block;
    }
    /* градация цвета поля ввода текта */
    input[type="text"]{
    width:200px;
    border:2px solid #933791;
    padding:1px;
    -moz-border-radius:10px;
    background-color:#F0DDED;
    color:#721855;
    border-style: double;
    cursor:pointer;/* изменяется курсор при наведении на поле ввода */
    font-style:eek:blique;/* текст внутри поля ввода прописью */
    font-weight:bold;/* текст внутри поля ввода жирный */
    font-family:cursive;/* изменение шрифта в поле ввода текста */
    padding:2px 0 0 0;/* отступы текста внутри поля ввода от краёв */
    }
    input[type="text"]:focus{
    border-color:#235428;
    background-color:#E180E3;
    }
    /* градация цвета поля ввода пароля */
    input[type="password"]{
    width:200px;
    border:2px solid #933791;
    -moz-border-radius:10px;
    background-color:#F0DDED;
    color:#721855;
    border-style: double;
    cursor:pointer;/* изменяется курсор при наведении на поле ввода */
    font-style:eek:blique;/* текст внутри поля ввода прописью */
    font-weight:bold;/* текст внутри поля ввода жирный */
    font-family:cursive;/* изменение шрифта в поле ввода текста */
    padding:2px 0 0 0;/* отступы текста внутри поля ввода от краёв */
    }
    input[type="password"]:focus{
    border-color:#235428;
    background-color:#E180E3;
    }
    /* градация цвета поля чекбокса */
    input[type="checkbox"]{
    border:2px solid #933791;
    padding:1px;
    -moz-border-radius:10px;
    background-color:#F0DDED;
    }
    input[type="checkbox"]:focus{
    border-color:#235428;
    background-color:#E180E3;
    }

    /* свойства кнопки */
    input[type="submit"]{
    cursor:pointer;
    border:2px solid #933791;
    padding:4px;
    -moz-border-radius:40px;
    background:#eee;
    color:#9E348C!important;
    text-shadow:3px 3px 3px #81FD11;
    }
    input[type="submit"]:hover,
    input[type="submit"]:focus {
    color:#DEF3E0!important;
    border-color:#235428;
    background:#E180E3;}
    input[type="submit"]:active{
    margin-top:2px; /* кнопка опускается вниз при нажатии */
    }
    /* КОНЕЦ ФОРМЫ ДЛЯ ВВОДА ДАННЫХ ПОЛЬЗОВАТЕЛЯ */
    /* СВОЙСТВА ХЕДЕРА */
    h2{
    color:#FF0099;
    text-shadow:1px 1px 1px #000;
    font-size:23px;
    text-align: center;
    }
    /* свойства боковых панелей хедера */
    .td_heder{
    background: transparent;/* прозрачный задний фон */
    width:220px;
    height: 80px;
    }
    /* заголовки перед полями регистрации */
    label{
    font-size:15px;
    color:#B83AB5;
    font-weight:bold;
    }
    /* свойства центральной панели хедера */
    .td_heder_center{
    -moz-box-shadow: 0 10px 80px rgba(0,0,0,.4), 0px 30px 30px 40px rgba(220,220,220,.5) inset;
    }
    /* КОНЕЦ СВОЙСТВ ХЕДЕРА */
    /* СВОЙСТВА ТЕЛА */
    body{
    background-image: url("img_index/123.png");
    width:1024px;
    font:12px/1.3 Arial, Sans-serif;
    background-color:#81FD11;
    }

    h6{
    color:#FF0099;
    text-align: center;
    font-size:30px;
    text-shadow:1px 1px 1px #000;
    }


    /* СВОЙСТВА ПРАВОЙ СТОРОНЫ ТЕЛА */
    .table_right{
    border:0;
    valign:top;
    margin: 10px;/* отступ сторон по вертикали */
    padding: 10 px;/* отступ сторон по горизонтали */

    padding:0 5px 5px;
    margin:auto;
    background-color:#81FD11;
    -moz-border-radius:10px;
    border: 2px solid #933791;
    /* градация цвета фона формы */
    -moz-box-shadow: 0 1px 20px rgba(0,0,0,.4), 0px 30px 30px 40px rgba(220,220,220,.5) inset;
    }

    .td_bottom{
    border-bottom:2px solid #933791;
    text-align: top;

    }

    .table_main{
    margin: 10px;
    padding: 10px;
    }
    /* КОНЕЦ СВОЙСТВ ПРАВОЙ СТОРОНЫ ТЕЛА */
    [/CSS]
    Сама картинка заднего фона присутствует,путь правильный(перепроверил раз 500!).Если выставляю цвет заднего фона,то страница выкрашивается в необходимый цвет,но если это свойство убираю,то опять белый фон...
    Помогите разобраться почему нет изображение на заднем фоне!
     
  2. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    папка img_index где находится относительно корня сайта и где относительно папки с css?
    короче пиши абсолютные пути от корня и будет тебе счастье.
     
  3. Panich

    Panich Активный пользователь

    С нами с:
    10 май 2011
    Сообщения:
    548
    Симпатии:
    0
    Адрес:
    Ростов-Москва
    Есть исходная папка,доустим "1" и в неё помещены папки "css" и "img_index"!
    Я пробовал писать и так: 1/img_index/123.jpg но ничего не выходит!Что самое интересное,то останьные изображения из этой папки на сайте появляется!
    Думаю,что какие-то свойство появления изображения блокируют,но пробовал поочереди их убирать и ничего не вышло...(
     
  4. Benjamin

    Benjamin Активный пользователь

    С нами с:
    23 янв 2009
    Сообщения:
    154
    Симпатии:
    0
    Адрес:
    Тула
    А что Firebug говорит?
     
  5. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    попробуй /img_index/123.jpg - обрати внимание на первый / - он там неспроста
    Или ../img_index/123.jpg - скорее всего тоже сработает

    В том что появляются остальные изображения ничего странного нет - они появляются в теге <img>, тег прописан в index.html который находится в корне сайта. То есть он ищет папку img_index в своей директории и естественно находит - она там и есть.

    А css у тебя лежит в папке /css. Он тоже ищет папку img_index в своей директории и естественно НЕ находит. Потому что ее там нет.

    А есть она в корне сайта. От которого тебе и надо плясать.
     
  6. Panich

    Panich Активный пользователь

    С нами с:
    10 май 2011
    Сообщения:
    548
    Симпатии:
    0
    Адрес:
    Ростов-Москва
    karakh, спасибо большое-действительно помогло!
    Перерыл кучу примеров,но ни у кого первого слеша не было...что за дела!
    Жаль потраченного времени-значит опять сегодня в ночь!)))
     
  7. Panich

    Panich Активный пользователь

    С нами с:
    10 май 2011
    Сообщения:
    548
    Симпатии:
    0
    Адрес:
    Ростов-Москва
    У меня ещё вопрос:
    вот есть форма регистрации.У неё цвет,допустим зелёный,с помощью свойства background:transparent я делаю её прозрачной.Но вот беда-цвет форма теряет тоже.
    Возможно ли сделать так,что бы форма становилась прозрачной не теряя при это навязаный css цвет!?
     
  8. tommyangelo

    tommyangelo Старожил

    С нами с:
    6 дек 2009
    Сообщения:
    2.549
    Симпатии:
    0
    Адрес:
    Мариуполь
    Цвет чего? Текста?

    transparent - это считай что цвет такой. Одновременно green и transparent невозможно)

    Поставь ей opacity: 0.5
     
  9. Panich

    Panich Активный пользователь

    С нами с:
    10 май 2011
    Сообщения:
    548
    Симпатии:
    0
    Адрес:
    Ростов-Москва
    tommyangelo,пробовал "opacity: 0.5",но тогда становится прозрачной вся форма...всё замечательно согласно моего вопроса,но вот беда-тогда и слова становятся прозрачными-прозрачность фону придать невозможно,не размыв при этом всю фору целиком вместе с надписями и полями для ввода текста!
    Возможно ли только задний фон размыть-при этом не трогая остальные элементы формы!?
     
  10. tommyangelo

    tommyangelo Старожил

    С нами с:
    6 дек 2009
    Сообщения:
    2.549
    Симпатии:
    0
    Адрес:
    Мариуполь
    Panich

    насколько я знаю - нет.
     
  11. karakh

    karakh Активный пользователь

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    можно попробовать сделать div с фоном, поставить ему opacity: 0.5 и положить на него еще один div, с прозрачным фоном через trancparency и с opacity 1, в который и пихать все остальное.