Цвет фона в процентах? - PullRequest
       11

Цвет фона в процентах?

0 голосов
/ 24 августа 2009

Можно ли как-нибудь использовать фоновый цвет, чтобы показывать в 50% моего деления с помощью css или javascript ??? Ящик, в котором я хочу сделать это, имеет фоновое изображение [png], которое я хочу заполнить 50% с цветом для отображения оценок ...... Я могу использовать изображение наполовину заполненного фонового изображения, но я считаю, что это замедлит мою рейтинговую систему, если я смогу заполнить поле на 50% цветом или мне приходится прибегать к замене фона на само наполовину заполненное изображение .. Спасибо

Ответы [ 3 ]

2 голосов
/ 24 августа 2009

Нет способа установить его на 50%, чтобы заполнить его родителя с помощью css. Вам нужно будет рассчитать размер индикатора выполнения. Допустим, ваш div равен 100px (и имеет белый фон), и вы хотите, чтобы индикатор показывал 55%, создайте div внутри него длиной 55px с цветом индикатора выполнения в качестве фона.

0 голосов
/ 28 марта 2013

Взгляните на этот цвет градиента фона и изучите CSS-код, используемый для тела в начале его!

В коде оператора body есть три строки кода CCS, связанные с темой фона:

body {
    font: 12px/18px Verdana, Arial, Tahoma, sans-serif;
    color: #001133 /* Other test colors: #006DD9 #444*/;
    /*background: #F4F4F4 url(i/bg.gif) - Another test;*/
    **background: -moz-linear-gradient(bottom, #ffffff, #3393C5);
    background: #3393C5 -webkit-gradient(linear, left top, left bottom, color-   stop(0.05, #3393C5), color-stop(1.00, #ffffff) ) no-repeat;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#3393C5',En dColorStr='#FFFFFF');**
    /*margin: 0px auto;*/
}

Начальная страница найдена на сайте http://www.webdesignseo.go.ro.

0 голосов
/ 24 августа 2009

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

Затем вы помещаете в него элемент div, имеющий желаемый цвет фона и ширину, равную ширине контейнера. Оба div'а должны иметь позицию: свойство, определенное, абсолютное или относительное, на самом деле не имеет значения. Тогда единственное, что осталось, это установить внутренний div в желаемую позицию, например left: -50%;

Только эта последняя часть вам понадобится JavaScript, если вы хотите сделать это динамически. Что-то вроде getElementById ('progress'). Style = 'left: -50%' должно сработать.

Быстрый и грязный (но работающий) пример:

<div style="width: 200px; height: 2em; overflow: 
    hidden; position: relative; padding: 1px; border: 1px solid red">

    <div style="width: 200px;  height: 2em; 
        background: blue; position: relative; left: -50%;">

        &nbsp;
    </div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...