Правильное отображение изображения при масштабировании (HTML) - PullRequest
Новая
       17

Правильное отображение изображения при масштабировании (HTML)

0 голосов
/ 28 апреля 2011

У меня есть веб-страница с тегом формы. Вне тега формы (в теле) я хотел установить фоновое изображение слева от тега формы (цель этого фонового изображения - градиент от черного цвета тела к цвету формы, который является Серый)

Моя проблема в том, что при «увеличении» браузера (очевидно, что увеличение идет в сторону формы), я ожидаю, что изображение будет постепенно исчезать с экрана, но факт в том, что изображение все еще отображается, но оно уходит темнее при увеличении масштаба. В конце левый край экрана становится черным. Похоже, изображение не принимает покинуть экран.

Перед увеличением:

Before Zooming in

После увеличения: After Zooming in

Используемое изображение:

The image that is used

Мой код: 

table cellspacing="0" cellpadding="0" class="myTable">
<tr>
    <td class="TopLeft">
    </td>
    <td class="Top">
    </td>
    <td class="TopRight">
    </td>
</tr>
<tr>
    <td class="Left">
    </td>
    <td>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td class="mTop" colspan="3">
                </td>
            </tr>
            <tr>
                <td class="mLeft">
                </td>
                <td class="middle">

                <form id="Form1" runat="server">

                    <div class="page">

                        <div class="main">
                            ASDFGGH
                            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>                                

                        </div>
                    </div>
                </form>



                </td>
                <td class="mRight">
                </td>
            </tr>
            <tr>
                <td class="mBottom" colspan="3">
                </td>
            </tr>
        </table>
    </td>
    <td class="Right">
    </td>
</tr>
<tr>
    <td class="BottomLeft">
    </td>
    <td class="Bottom">
    </td>
    <td class="BottomRight">
    </td>
</tr>

А я поставлю только CSS класса: «Левый» 

.Left
{
    width: 113px;
    height: 761px;
    background-image: url('../Images/L.jpg');    
}

Спасибо ...

Ответы [ 2 ]

0 голосов
/ 04 мая 2011

Наконец ... проблема связана со свойством CSS: "background-position", которое по умолчанию установлено влево.Поэтому я установил 

background-position: right;

И проблема решена

0 голосов
/ 28 апреля 2011

Я не уверен, что это вопрос, на который можно дать определенный ответ. Не существует общепринятого стандарта для как браузер должен увеличивать страницу. Firefox, IE и Chrome делают это по-разному. Является ли проблема такой же в других браузерах, кроме Firefox?

Возможно, вы также захотите переработать свой код, чтобы он использовал div вместо таблиц для разметки страницы, хотя это потребует некоторой энергии. Это может привести к тому, что страница будет масштабироваться так, как вы ожидаете.

Есть ли место, куда мы можем пойти, чтобы посмотреть весь код, чтобы мы могли поиграть с ним и, возможно, более легко определить потенциальное решение?

...