Tani hosting

Nakładanie obrazka na obrazek
bartogorzow Offline
TenTego Premium

Liczba postów: 9
Reputacja: 0
Post: #1
Nakładanie obrazka na obrazek 01-10-2016 19:09
Nie wiem, czy dobrze opisałem tematem, ale zrobiłem tło fullscreen slider. I teraz chciałbym aby na tym tle ułożyć drugą grafikę (nieruchomo). Nie mam pojęcia jak to zrobić niestety Sad

Kod:
   

    <body id="myCarousel" class="carousel slide">
     
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>


     
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/1.png')"></div>
                <div class="carousel-caption">
                 <div id="iks" class="iks"></div>
                    
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/2.png');"></div>
                <div class="carousel-caption">
                   
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/3.png');"></div>
                <div class="carousel-caption">
               
                </div>
            </div>

           
        </div>
</div>

Nie wiem kompletnie jak zabrać się za css do takiego efektu. Proszę o pomoc Smile
Cytuj
Diabeł Online
Użyszkodnik


Liczba postów: 777
Reputacja: 666
phost Offline
Pomocnik

Liczba postów: 560
Reputacja: 47
Post: #2
RE: Nakładanie obrazka na obrazek 03-10-2016 22:08
Dodaj atrybuty z-index dla obrazow. Oczywiscie pozycje i rozmiary rowniez dodajesz. Wtedy bedziesz mial jeden na drugim obrazy. Nie wiem jak masz do tej pory to ostylowane wiec dla tla daj, np z-index 1 a dla obrazka na nim z-index 3, to tylko przyklad.

Cytuj
bartogorzow Offline
TenTego Premium

Liczba postów: 9
Reputacja: 0
Post: #3
RE: Nakładanie obrazka na obrazek 04-10-2016 05:29
Próbowałem też tak, ale nie pomogło. Zastanawiam się nad jednym, czy w ogóle właściwie napisałem kod, czy obie klasy mogą mieć atrybut background? Zrobiłem teraz bez slidera, żeby sobie uprościć chwilowo. Dodam, że obraz x.png jest x-em na przezroczystości, czyli w teorii nie powinno być problemu.

Kod:
body,

html {
    min-height: 100%;
}

body {
    width: 100%;
    height:100%;
    background-image:url(../img/1.png);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #999;
    background-position: relative;
    z-index:1;
}


}

.iks {
    background-image:url(../img/x.png);
    width:300px;
    height:200px;
    left:25%;
    top:25%;
    z-index:9999;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: absolute;
    z-index:3;
}
Jeśli zrobiłem coś głupio- proszę się nie śmiać. 
(Ten post był ostatnio modyfikowany: 04-10-2016 10:32 przez bartogorzow.)
Cytuj
phost Offline
Pomocnik

Liczba postów: 560
Reputacja: 47
Post: #4
RE: Nakładanie obrazka na obrazek 04-10-2016 10:47
No to tak:
1. tło slidera to obrazek w nim się przewijający czy może jest to stałe tło a na nim ma się przewijać treść?
2. ten nieruchomy obraz ma być nałożony na tło przewijające się i ma stale wyświetlać jedną treść?
3. który z obrazków jest treścią slidera?

Sprawdź działanie kodu na zwykłej html jako demo i będziesz wiedział czy ten kod działa prawidłowo. Druga sprawa to pokaż jaki konkretnie efekt chcesz uzyskać?

Cytuj
bartogorzow Offline
TenTego Premium

Liczba postów: 9
Reputacja: 0
Post: #5
RE: Nakładanie obrazka na obrazek 04-10-2016 11:11
Już pomińmy sam slider. Zróbmy samo tło i na tym tle chcę ponakładać obiekty. Tak jak na wizualizacji:

[Obrazek: 2sfkmf7em6rz_t.jpg]

Czyli mamy po kolei:
1) tło
2) ten szary x
3) ikony zielone, które będą przekierowywały do podstron
(Ten post był ostatnio modyfikowany: 04-10-2016 11:11 przez bartogorzow.)
Cytuj


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości