repeat ar position

[sega99]

ir kādas alternatīvas netaisot 100px garu bildi?

 

vēlos lai izvēlētā krāsa

būtu iespējami aizpildīt 50% no 100px

 

problēma ir tur ka ja ieliek repeat-x tad viņš aizpilda līdz 50% ar visu attēlu vairākas reizes ntajās krāsās nevis konkrēto apgabalu(krāsu) kas šajā gadijumā tiek izvēlēts violets ar background-position palīdzību

 

kods

http://paste.php.lv/32ad502447abb49a79b315c9ccdb7ac6/nonum

 

bilde ar kuru tiek strādāts

Edited May 1, 2013 by sega99

[codez]

http://jsfiddle.net/k2bVZ/

 

HTML:

<div class="outer">
    <div class="inner" style="width:20%;"></div>
</div>

<div class="outer">
    <div class="inner" style="width:50%;"></div>
</div>

<div class="outer">
    <div class="inner" style="width:70%;"></div>
</div>

 

CSS:

.outer{
    width:200px;
    height:20px;
    border:1px solid #ccc;
    margin:4px;
}
.inner{
    height:100%;
    background:url(http://content.mycutegraphics.com/backgrounds/polkadot/polka-dot-background29.gif);
}

 

 

P.S.

Uzlabotais demo: http://jsfiddle.net/k2bVZ/1/

Edited May 1, 2013 by codez

[sega99]

nee

 

piem.

 

 

<div style="background-color: #ffffff; box-shadow: 1px 1px 1px grey; width:100px;">
<div style="height: 10px;background: url('/image.png') repeat-x; background-position: -4px 1px; width: 50%;"></div>
</div>

 

taču repeat-x taisa pigorus, viņš pārzīmē visu attēlu pārzīmē nevis TIKAI TO DAĻU kas izvēlēta ar background-position

 

ar no-repeat parāda īsto attēlu bet man vajag tieši to background-position daļu repeatot

Edited May 1, 2013 by sega99

[codez]

Tādā gadijumā vienīgā iespēja ir to darit ar js.

1. variants - Izveidot daudz daudz blakus stāvošus html elementus, kuros bg ir uzlikts attiecīgais izgriezums

2. variants - uz canvas ciklā uzzimēt izgriezumu vairākas reizes.

3. ja runa ir par vienu krāsu, tad noteikt krāsu un ar js iestatīt bacgroundtu tādā krāsā.

 

 

P.S. Nice1 variants arī der, ja bildētē katru krāsu uztaisa tik augstu, cik augsts ir aizpildāmais laukums.

|

|

|

|

|

Edited May 1, 2013 by codez

[sega99]

thanks veči :)