HTML/CSS градиентный фон на столе

Я сделал эту простую навигационную панель с градиентом фона.HTML/CSS градиентный фон на столе

как вы можете видеть, у него есть градиентный фон. Ничего необычного, просто использовал градиент фотошопа, замаскированный таблицей. Я сделал версию для фотошопа только для того, чтобы показать свой дизайн, и теперь у меня возникают проблемы с его повторным созданием в Интернете. Как сделать таблицу HTML такой градиентной, как ее фон?

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

источник

2013-05-30 brothman

Где образ вашей проблемы? (он также не отправлен по первому вопросу) – Nightfirecat

нужно 100 пунктов rep, чтобы отправить изображение, sry :( – brothman

Я использую случайный градиент, потому что я не могу видеть нужную один, но вот быстрый пример CSS3.

HTML

<table> 
    <tr> 
     <td>Table Data</td> 
    </tr> 
</table>

CSS

table{ 
    /* set your gradient code here */ 
    background: rgb(240,183,161); 
    background: -moz-linear-gradient(-45deg, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1))); 
    background: -webkit-linear-gradient(-45deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); 
    background: -o-linear-gradient(-45deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); 
    background: -ms-linear-gradient(-45deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); 
    background: linear-gradient(135deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1); 

}

Градиент генерируется с: http://www.colorzilla.com/gradient-editor/

Рабочая Fiddle: http://jsfiddle.net/daCrosby/43ZkH/

источник

2013-05-31 01:14:51 DACrosby

thx для ответа. Сначала меня выбрасывали, потому что по какой-то причине фон градиента не появляется в моем DreamWeaver CS6 .. но когда я просматриваю страницу в Safari, это показывает. В любом случае, thx снова! – brothman

Вы можете использовать DIV в качестве родителя для таблицы, которая будет иметь градиент и отступы: 0;

<div style="background: url('gradient.jpg') repeat-x left top"> 
<table> 
<!-- table content here --> 
</table> 
</div>

** Поддерживается во всех браузерах

источник

2013-05-31 01:14:41

HTML/CSS градиентный фон на столе

ответ

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